Bài 35: Phần tử canvas trong HTML5
Phần tử <canvas> trong HTML được sử dụng để vẽ đồ họa cho trang web.
Các đồ họa hình bên trái được tạo ra bởi <canvas>. Nó gồm 4 phần: một hình chữ nhật màu đỏ, một hình chữ nhật có màu sám nhạt dần, một hình chữ nhật nhiều màu sắc và một chữ nhiều màu sắc.
HTML Canvas là gì?
Phần tử <canvas> trong HTML được sử dụng để vẽ các đối tượng đồ họa, nó chiếm một vùng trên trang web, qua một ngôn ngữ dạng script (thường là JavaScript).
Phần tử <canvas> chỉ chứa khối đồ họa. Bạn phải dùng một script để vẽ các đối tượng đồ họa.
Canvas cung cấp nhiều cách để vẽ đường thẳng, hình hộp, hình tròn, viết chữ, chèn ảnh,v.v.
Trình duyệt hỗ trợ
Những phiên bản trình duyệt bắt đầu hỗ trợ phần tử <canvas>.
| Phần tử |  |
 |
 |
 |
 |
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
|---|
Các ví dụ về Canvas
Canvas là một vùng hình chữ nhật trên một trang HTML. Theo mặc định, một canvas không đường biên và không chứa nội dung.
Code khai báo một phần tử canvas:
<canvas id="myCanvas" width="200" height="100"></canvas>
Chú ý: Luôn luôn đặt thuộc tính id (để có thể gọi trong script), thuộc tính width và height để đặt kích thước của canvas.
Để thêm đường viền, sử dụng thuộc tính style như ví dụ dưới
Ví dụ cơ bản về Canvas
Code
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>Kết quả
Vẽ với JavaScript
Code
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
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.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
Kết quả
Vẽ đường thẳng
Code
<!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>
Kết quả
Vẽ hình tròn
Code
<!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.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
Kết quả
Chèn văn bản
Code
<!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.font = "30px Arial";
ctx.fillText("Xin chào bạn",10,50);
</script>
</body>
</html>
Kết quả
Chèn văn bản với chữ dạng đường nét
Code
<!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.font = "30px Arial";
ctx.strokeText("Xin chào bạn",10,50);
</script>
</body>
</html>
Kết quả
Vẽ hình với màu biến đổi tuyến tính (Linear Gradient)
Code
<!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");
// Tạo gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Gắn gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
Kết quả
Vẽ hình với màu biến đổi từ tâm (Radial Gradient)
Code
<!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");
// 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);
</script>
</body>
</html>
Kết quả
Chèn Ảnh
Code
<!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;">
Trình duyệt của bạn không hỗ trợ canvas.
</canvas>
<p><button onclick="myCanvas()">Thêm ảnh vào canvas</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 quả
Ảnh sử dụng:
Không có hướng dẫn làm chữ 7 màu kia ạ
Bạn có thể sử dụng hàm measureText() để thiết lập các mày khác nhau cho các ký tự. Bạn copy code và xem kết quả
code html:
code script
Một ví dụ khác sử dụng màu cách phối màu gradient của 3 màu red, green, blue. Chạy thử code và xem kết quả: