Phần tử Canvas trong HTML5
Phần tử <canvas> trong HTML được sử dụng để vẽ đồ họa cho trang web. Vậy canvas có những nội dung gì, cách sử dụng ra sao, bạn hãy cùng Quantrimang tìm hiểu qua bài viết này nhé. Canvas là gì? Phần tử <canvas> sử dụng để vẽ các thành phần đồ họa từ đơn giản như các đường ...
Phần tử <canvas> trong HTML được sử dụng để vẽ đồ họa cho trang web. Vậy canvas có những nội dung gì, cách sử dụng ra sao, bạn hãy cùng Quantrimang tìm hiểu qua bài viết này nhé.
Canvas là gì?
Phần tử <canvas> sử dụng để vẽ các thành phần đồ họa từ đơn giản như các đường đến các đồ họa phức tạp (đường thẳng, hình hộp, hình tròn, viết chữ, chèn hình ảnh...).
<canvas> cũng tương tự như những thẻ HTML khác, để sử dụng thì bạn phải đặt thẻ <canvas></canvas> tại vị trí muốn hiển thị. Tuy nhiên có một sự khác biệt rõ rệt nhất là nội dung của nó lại được xây dựng từ Javascript.
<canvas> chỉ có chức năng chứa các đối tượng đồ họa. Bạn bắt buộc phải sử dụng JavaScript để vẽ.
Trình duyệt hỗ trợ
|
|  |  |  |  |
| 4.0 | 2.0 | 9.0 | 9.0 | 3.1 |
Tọa độ trong canvas
Canvas sử dụng trục tọa độ 2 chiều, với góc trái phía trên là tọa độ gốc (0,0)
- X : tọa độ theo phương nằm ngang, tăng dần từ trái sang phải
- Y : tọa độ theo phương thẳng đứng, tăng dần từ trên xuống dưới
Khai báo 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" awidth="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 awidth và height để đặt kích thước của canvas. Nếu không được chỉ ra kích thước, thì kích thước mặc định là 300px chiều rộng và 150px chiều cao.
Để thêm đường viền, sử dụng thuộc tính style như sau:
<canvas id="myCanvas" awidth="500" height="200" style="border:1px solid #000000;">
</canvas>
Kết quả:
Một số lệnh vẽ <canvas>
Vẽ đường thẳng trong Canvas
Để vẽ đường thẳng trên một đối tượng canvas, ta sẽ dùng hàm sau:
- moveTo(x,y): xác định điểm bắt đầu
- lineTo(x,y): xác định điểm kết thúc
Thường để vẽ các đường đầu tiên ta gọi beginPath() để khởi tạo một path mới (nó chứa tập hợp các lệnh đường cần vẽ).
Cuối cùng để thực hiện vẽ tập đó gọi hàm stroke()
Ví dụ
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" awidth="500" height="200" style="border:1px solid #8080ff;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Đường thứ nhất
ctx.beginPath(); // Khai báo vẽ đường thẳng mới
ctx.moveTo(0,0); // Xác định điểm bắt đầu
ctx.lineTo(500,200); // Xác định điểm kết thúc
ctx.strokeStyle = 'red' // Màu của đường thẳng
ctx.stroke(); // Tiến hành vẽ
// Đường thứ hai
ctx.beginPath(); // Khai báo vẽ đường thẳng mới
ctx.moveTo(0,200); // Xác định điểm bắt đầu
ctx.lineTo(250,100); // Xác định điểm kết thúc
ctx.strokeStyle = 'brown' // Màu của đường thẳng
ctx.lineWidth = 3; //Độ rộng
ctx.stroke(); // Tiến hành vẽ
</script>
</body>
</html>
Kết quả thu được
Vẽ cung tròn - hình tròn trong Canvas
Để vẽ cung tròn - hình tròn, ta dùng lệnh: arc(x,y,r,start,stop)
- x và y: tọa độ tâm
- r: là bán kính
- start: là góc bắt đầu
- end: là góc kết thúc
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" awidth="600" height="200" style="border:1px solid teal;background: LightYellow"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Cung tròn 1
ctx.beginPath();
ctx.arc(100, 100, 90, Math.PI, 0); // Tọa độ tâm (100,100), bán kính 90
ctx.strokeStyle = 'steelblue'; // Màu của đường
ctx.lineWidth = 5; //Độ rộng
ctx.stroke();
// Hình tròn
ctx.beginPath();
ctx.arc(300, 100, 90, 0, 2*Math.PI); // Tọa độ tâm (300,100), bán kính 90
ctx.strokeStyle = 'salmon' // Màu của đường
ctx.lineWidth = 3; //Độ rộng
ctx.stroke();
// Cung tròn 2
ctx.beginPath();
ctx.arc(500, 100, 90, 0, Math.PI); // Tọa độ tâm (500,100), bán kính 90
ctx.strokeStyle = 'seagreen'; // Màu của đường
ctx.lineWidth = 5; //Độ rộng
ctx.stroke();
</script>
</body>
</html>
Kết quả thu được
Viết chữ trong Canvas
Để viết một đoạn văn bản, ta chú trọng đến thuộc tính và hàm sau:
- font: định kiểu chữ cho đoạn văn bản.
- fillText(text,x,y): Viết chữ trên canvas.
- strokeText(text,x,y): Viết chữ trên canvas nhưng không tô màu chữ.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" awidth="500" height="200" style="background: teal"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "48px Arial";
ctx.fillStyle = 'lightsalmon';
ctx.fillText("Hello World",120,80);
ctx.font = '50px serif';
ctx.strokeStyle = 'lightsalmon';
ctx.strokeText('Hello world', 120, 150);
</script>
</body>
</html>
Kết quả:
Màu Gradient (Màu biến đổi tuyến tính) trong Canvas
Có 2 loại gradients:
- createLinearGradient(x,y,x1,y1): Quét màu xuất phát từ 1 phía, bốn tham số biểu diễn điểm bắt đầu (x,y) và điểm kết thúc (x1,y1) của gradient.
- createRadialGradient(x,y,r,x1,y1,r1): Quét màu xuất phát từ tâm, bộ tham số đầu tiên định nghĩa một đường tròn với tọa độ tâm (x,y) và bán kính r bắt đầu; và bộ tham số thứ hai là vòng tròn với tọa độ tâm (x1,y1) và bán kính r1 kết thúc gradient.
Hàm addColorStop() quy định điểm dừng quét màu dọc theo điểm quét (gradient). Điểm gradient có thể ở bất kỳ giữa 0 và 1.
Sau khi thiết lập gradient, ta dùng fillStyle hoặc strokeStyle để gán gradient vào ô canvas,
Ví dụ: Dùng createLinearGradient()
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" awidth="500" height="200" style="background: pink"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Tạo gradient
var grd = ctx.createLinearGradient(0,40,470,150);
grd.addColorStop(0,"pink");
grd.addColorStop(1,"purple");
ctx.fillStyle = grd;
ctx.fillRect(50,50,400,100);
</script>
</body>
</html>
Kết quả thu được
Ví dụ: Dùng createRadialGradient()
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" awidth="500" height="200" style="background: LightSkyBlue"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(125,100,10,125,100,150);
grd.addColorStop(0,"coral");
grd.addColorStop(1,"Moccasin");
var grd1 = ctx.createRadialGradient(375,100,10,375,100,150);
grd1.addColorStop(0,"moccasin");
grd1.addColorStop(1,"coral");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(25,25,200,150);
ctx.fillStyle = grd1;
ctx.fillRect(250,25,225,150);
</script>
</body>
</html>
Kết quả thu được
