Thẻ canvas trong HTML được sử dụng để vẽ đồ họa. Để vẽ đồ họa, bạn cần sử dụng script. Thẻ này được giới thiệu trong HTML5. 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.
Sau đây là các thuộc tính -
- chiều cao - Chiều cao của canvas tính bằng pixel
- chiều rộng - Chiều rộng của canvas tính bằng pixel
Bây giờ chúng ta hãy xem một ví dụ để triển khai thẻ canvas trong HTML -
Ví dụ
<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="600" height="350" style="border −2px solid orange;">
</canvas>
<script>
var c = document.getElementById("newCanvas");
var ctx = c.getContext("2d");
ctx.shadowBlur = 20;
ctx.shadowColor = "black";
ctx.fillStyle = "green";
ctx.fillRect(40, 40, 100, 250);
ctx.shadowBlur = 30;
ctx.shadowColor = "blue";
ctx.fillStyle = "orange";
ctx.fillRect(200, 40, 200, 150);
</script>
</body>
</html> Đầu ra
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
