Để vẽ canvas trên một trang web, hãy sử dụng phần tử canvas HTML5. Phần tử
Mỗi canvas đều có hai phần tử mô tả chiều cao và chiều rộng của canvas, tức là chiều cao và chiều rộng tương ứng.
Cùng với đó, bạn cũng cần đặt một id cho canvas như được hiển thị trong đoạn mã bên dưới -
<canvas id = "newCanvas" width = "100" height = "100"></canvas>
Tìm phần tử
var canvas = document.getElementById("newCanvas"); Để hiển thị thứ gì đó trên canvas, trước tiên script cần truy cập vào ngữ cảnh kết xuất và vẽ trên đó.
Bây giờ chúng ta hãy xem một ví dụ để vẽ đường dẫn trong HTML5 với
Ví dụ
<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
background-color: orange;
}
</style>
<script>
function drawShape() {
// get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext) {
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
// Draw shapes
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Hãy để chúng tôi xem một ví dụ khác để vẽ một đường cong bậc hai trong HTML5 -
Ví dụ
<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type>
function drawShape() {
// get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext) {
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
// Draw shapes
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('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
