[HTML/HTML5] Phần 39: Tìm hiểu về phần tử Canvas trong HTML5

Cập nhật lần cuối: 12/09/2023 lúc 10:12:46

Thể loại: HTML/HTML5

Phần tử Canvas được dùng để vẽ đồ họa trong một trang web, thông qua JavaScript. Phần tử canvas là vùng chứa duy nhất cho các đồ họa. Canvas chứa một vài phương thức để vẽ đường thẳng, hình hộp, đường tròn, văn bản và thêm hình ảnh.

Hỗ trợ trình duyệt

Hầu hết các trình duyệt hiện nay đều hỗ trợ đầy đủ phần tử canvas như Chrome (4.0), Edge (9.0), Firefox (2.0), Safari (3.1) và Opera (9.0).

Các ví dụ

Phần tử canvas thể hiện một vùng hình chữ nhật trên trang HTML. Mặc định, canvas không có viền và nội dung. Ví dụ, tạo một canvas có kích thước 200 px và 100 px.

<canvas id="myCanvas" width="300" height="400"></canvas>

Lưu ý: Bạn phải luôn mô tả một thuộc tính id (để tham chiếu với một đoạn mã kịch bản) với chiều rộng và chiều cao để định nghĩa kích thước của canvas. Để thêm viền, hãy dùng thuộc tính style. Ví dụ sau là một canvas có viền đen:

<canvas id="myCanvas" width="300" height="400" style="border:2px solid #000000;"></canvas>

Vẽ đường thẳng

Ví dụ sau mô tả cách vẽ một đường thẳng. Để vẽ đường thẳng, chúng ta sử dụng phương thức getContext mô tả việc vẽ 2d.

Phương thức moveTo để xác định điểm bắt đầu vẽ và phương thức lineTo xác định điểm kết thúc. Phương thức stroke dùng để vẽ đường thẳng từ điểm bắt đầu đến điểm kết thúc.

<!DOCTYPE html>
<html>
<body>

<canvas id="dammioCanvas" width="400" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("dammioCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(50,50);
ctx.lineTo(250,250);
ctx.stroke();
</script>

</body>
</html>

Vẽ hình tròn

Tương tự, để vẽ hình tròn, chúng ta dùng phương thức arc(x, y, r, rc1, rc2) để vẽ cung tròn với x, y là tọa độ tâm; r là bán kính, rc1 và rc2 là vẽ cung tròn từ độ dài chu vi rc1 đến rc2. Trong ví dụ, chúng ta vẽ cung tròn từ 0 đến 2 * Math.PI tương ứng với chu vi hình tròn.

Liên quan: [HTML/HTML5] Phần 19: Thuộc tính class và thuộc tính id

<!DOCTYPE html>
<html>
<body>

<canvas id="dammioCanvas" width="400" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("dammioCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 80, 0, 2 * Math.PI);
ctx.stroke();
</script>

</body>
</html>

Vẽ văn bản

Để thể hiện font chữ cho văn bản, chúng ta dùng thuộc tính font, để vẽ văn bản thì dùng phương thức fillText.

<!DOCTYPE html>
<html>
<body>

<canvas id="dammioCanvas" width="400" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("dammioCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Xin chào Dammio!", 10, 50);
</script>

</body>
</html>

Vẽ văn bản có viền

Phương thức strokeText dùng để vẽ viền cho văn bản.

<!DOCTYPE html>
<html>
<body>

<canvas id="dammioCanvas" width="400" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("dammioCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Xin chào Dammio!", 50, 50);
</script>

</body>
</html>

Vẽ hình chữ nhật đậm nhạt

<!DOCTYPE html>
<html>
<body>

<canvas id="dammioCanvas" width="400" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("dammioCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "green");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 200, 200);
</script>

</body>
</html>

Vẽ hình tròn đậm nhạt

<!DOCTYPE html>
<html>
<body>

<canvas id="dammioCanvas" width="400" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("dammioCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "blue");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

</body>
</html>

Vẽ hình ảnh

Để vẽ hình ảnh trong canvas, bạn hãy dùng phương thức drawImage.

<!DOCTYPE html>
<html>
<body>

<p>Hình ảnh:</p>
<img id="scream" src="https://www.dammio.com/wp-content/uploads/2017/08/cropped-logo_dammio-1.png" alt="The Scream" width="300">

<p>Vẽ hình ảnh</p>
<canvas id="myCanvas" width="1000" 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>

Kết luận

Bài viết đã cung cấp cho bạn các ví dụ để vẽ 2D dùng canvas, mời bạn theo dõi bài tiếp theo.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2018). [HTML/HTML5] Phần 39: Tìm hiểu về phần tử Canvas trong HTML5. https://www.dammio.com/2018/06/01/html-html5-phan-39-tim-hieu-ve-phan-tu-canvas-trong-html5.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[HTML/HTML5] Phần 39: Tìm hiểu về phần tử Canvas trong HTML5}, year = {2018}, url = {https://www.dammio.com/2018/06/01/html-html5-phan-39-tim-hieu-ve-phan-tu-canvas-trong-html5}, urldate = {2024-09-29} }