Để vẽ canvas trên trang web, sử dụng phần tử HTML5 <canvas>. Phần tử <canvas> cho phép bạn vẽ đồ họa bằng JavaScript. Với canvas, bạn có thể vẽ đường thẳng, hình chữ nhật, đường cong Bezier, v.v.
Mọi canvas đều có hai thuộc tính mô tả chiều cao và chiều rộng: height và width.
Ngoài ra, bạn cũng cần thiết lập id cho canvas như trong đoạn mã dưới:
<canvas id="newCanvas" width="100" height="100"></canvas>
Tìm phần tử <canvas> trong DOM bằng phương thức getElementById():
var canvas = document.getElementById("newCanvas");
Để hiển thị nội dung trên canvas, script trước tiên cần truy cập ngữ cảnh render (rendering context) và vẽ lên nó. <canvas> có phương thức DOM tên là getContext để lấy ngữ cảnh render và các hàm vẽ. Hàm này nhận một tham số là loại ngữ cảnh 2d.
Ví dụ vẽ đường dẫn (paths) trong HTML5 với <canvas>:
Ví dụ 1: Vẽ hình tròn và mặt cười
<!DOCTYPE HTML> <html> <head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
background-color: orange;
}
</style>
<script>
function drawShape() {
// Lấy phần tử canvas dùng DOM
var canvas = document.getElementById('mycanvas');
// Đảm bảo không thực thi khi canvas không được hỗ trợ
if (canvas.getContext) {
// Dùng getContext để dùng canvas vẽ
var ctx = canvas.getContext('2d');
// Vẽ hình
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Vòng tròn ngoài
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Miệng
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Mắt trái
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Mắt phải
ctx.stroke();
} else {
alert('Bạn cần Safari hoặc Firefox 1.5+ để xem demo này.');
}
}
</script> </head>
<body id="test" onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body> </html>
Kết quả
Đoạn mã trên sẽ tạo ra kết quả như sau:
Ví dụ 2: Vẽ đường cong bậc hai (Quadratic Curve)
<!DOCTYPE HTML> <html> <head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script>
function drawShape() {
var canvas = document.getElementById('mycanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();
} else {
alert('Bạn cần Safari hoặc Firefox 1.5+ để xem demo này.');
}
}
</script> </head>
<body id="test" onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body> </html>
Kết quả
Đoạn mã trên sẽ tạo ra kết quả như sau:
