HTML Canvas là gì.
Phần tử HTML <canvas> được sử dụng để vẽ đồ họa một cách nhanh chóng bằng JavaScript trên một trang web.
Phần tử <canvas> chỉ là một bộ chứa cho đồ họa, bạn phải dùng JavaScript để vẽ chúng.
Canvas có nhiều phương thức để vẽ, đường thẳng, hình hộp, hình tròn, văn bản, và thêm ảnh.
Ví dụ về Canvas
Canvas là một vùng hình chữ nhật trên trang HTML. Mặc định thì canvas không có viền và nội dung.
Cú pháp như sau:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: Luôn chỉ ra thuộc tính id (để làm việc với JavaScript), thêm thuộc tính width và height để xác định kích thước của canvas, để thêm border dùng thuộc tính style.
Ví dụ về một canvas cơ bản:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
Kẻ đường thẳng
Ví dụ
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Trình duyệt của bạn không hỗ trợ canvas.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
Vẽ hình tròn
Ví dụ
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
Vẽ văn bản
Ví dụ
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
Viền văn bản
Ví dụ
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
Vẽ Gradient tuyến tính
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
Vẽ Gradient hình tròn
Ví dụ
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
Vẽ hình ảnh
Ví dụ
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<p><button onclick="myCanvas()">Try it</button></p>
<script>
function myCanvas() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
}
</script>
</body>
</html>
Trích nguồn từ: (https://www.w3schools.com/html/html5_canvas.asp)
