Đồ họa Canvas HTML
Phần tử HTML <canvas>được sử dụng để vẽ đồ họa trên trang web.
Hình bên trái được tạo bằng <canvas>. Nó hiển thị bốn yếu tố: một hình chữ nhật màu đỏ, một hình chữ nhật gradient, một hình chữ nhật nhiều màu và một văn bản nhiều màu.
HTML Canvas là gì?
Phần tử HTML <canvas>được sử dụng để vẽ đồ họa một cách nhanh chóng, thông qua JavaScript.
Phần <canvas>tử chỉ là một vùng chứa cho đồ họa. Bạn phải sử dụng JavaScript để thực sự vẽ đồ họa.
Canvas có một số phương pháp để vẽ đường dẫn, hộp, hình tròn, văn bản và thêm hình ảnh.
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ
<canvas>phần tử.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Ví dụ về canvas
Canvas là một vùng hình chữ nhật trên trang HTML. Theo mặc định, canvas không có đường viền và không có nội dung.
Đánh dấu trông như thế này:
<canvas id="myCanvas" width="200" height="100"></canvas>
Lưu ý: Luôn chỉ định một idthuộc tính (được tham chiếu trong tập lệnh) và một thuộc tính widthvà heightđể xác định kích thước của canvas. Để thêm đường viền, hãy sử dụng stylethuộc tính.
Đây là một ví dụ về canvas rỗng, cơ bản:
Thí dụ
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
Thêm một JavaScript
Sau khi tạo vùng canvas hình chữ nhật, bạn phải thêm JavaScript để vẽ.
Dưới đây là một số ví dụ:
Vẽ đường thẳng
Thí dụ
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
Vẽ một vòng tròn
Thí dụ
<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>
Vẽ một văn bản
Thí dụ
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
Nét chữ
Thí dụ
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
Vẽ Gradient tuyến tính
Thí dụ
<script>
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);
</script>
Vẽ Gradient tròn
Thí dụ
<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>
Vẽ hình ảnh
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
Hướng dẫn HTML Canvas
Để tìm hiểu thêm <canvas>, vui lòng đọc Hướng dẫn HTML Canvas của chúng tôi .