Đồ họa Canvas HTML
Phần tử HTML <canvas> được sử dụng để vẽ đồ họa trên trang web.
Đồ họa bên trái được tạo bằng <canvas> . Nó hiển thị bốn thành phần: hình chữ nhật màu đỏ, hình chữ nhật chuyển màu, hình chữ nhật nhiều màu và văn bản nhiều màu.
Canvas HTML 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 tử <canvas> chỉ là nơi chứa đồ 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.
Canvas được hỗ trợ bởi tất cả các trình duyệt chính.
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 thuộc tính id (được tham chiếu trong tập lệnh) cũng như thuộc tính width và height để xác định kích thước của khung vẽ. Để thêm đường viền, hãy sử dụng thuộc tính style .
Dưới đây là ví dụ về canvas trống, cơ bản:
Ví dụ
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
Hãy tự mình thử » Thêm một JavaScript
Sau khi tạo vùng canvas hình chữ nhật, bạn phải thêm JavaScript để thực hiện vẽ.
Dưới đây là một số ví dụ:
Vẽ đường thẳng
Ví dụ
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script> Hãy tự mình thử »Vẽ một vòng tròn
Ví 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> Hãy tự mình thử »Vẽ một văn bản
Ví dụ
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script> Hãy tự mình thử »Văn bản đột quỵ
Ví dụ
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script> Hãy tự mình thử »Vẽ gradient tuyến tính
Ví 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> Hãy tự mình thử »Vẽ gradient tròn
Ví 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> Hãy tự mình thử »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ãy tự mình thử »Hướng dẫn về Canvas HTML
Để tìm hiểu thêm về <canvas> , vui lòng đọc Hướng dẫn Canvas HTML của chúng tôi.
