Vẽ trên canvas HTML phải được thực hiện bằng JavaScript. Sử dụng Phương thức DOM HTML getElementById () và getContext () trước khi vẽ trên canvas. Để vẽ một ngôi sao trong HTML, hãy sử dụng phần tử canvas.
Với canvas, sử dụng phương thức lineTo () để vẽ một ngôi sao. Phương thức lineTo () bao gồm các giá trị tham số x và y, các giá trị này định vị các đường để giúp bạn vẽ.
Để vẽ canvas trên tài liệu HTML:
Ví dụ
Bạn có thể thử chạy mã sau để vẽ một ngôi sao bằng HTML5 canvas
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Canvas Tag</title>
</head>
<body>
<canvas id="newCanvas" width="300" height="250"></canvas>
<script>
var canvas = document.getElementById('newCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.moveTo(108, 0.0);
ctx.lineTo(141, 70);
ctx.lineTo(218, 78.3);
ctx.lineTo(162, 131);
ctx.lineTo(175, 205);
ctx.lineTo(108, 170);
ctx.lineTo(41.2, 205);
ctx.lineTo(55, 131);
ctx.lineTo(1, 78);
ctx.lineTo(75, 68);
ctx.lineTo(108, 0);
ctx.closePath();
ctx.fill();
</script>
</body>
</html> Đầu ra
