Đồ họa canvas html

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 tử <canvas> chỉ là một vùng chứa cho đồ họa. Chúng ta phải sử dụng JavaScript để thực sự vẽ đồ họa.

Canvas có một số phương pháp để vẽ đường thẳng, hộp, hình tròn, văn bản và thêm hình ảnh...

Trình duyệt hỗ trợ

Các số trong bảng bên dưới chỉ định phiên bản tối thiểu trình duyệt hỗ trợ đầy đủ cho phần tử HTML <canvas>.

Phần tử
<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.

Thuộc tính canvas như sau.

Lưu ý: Luôn chỉ định thuộc tính id (được tham chiếu trong tập lệnh) và thuộc tính width và height để xác định kích thước của canvas. Để thêm đường viền, chúng ta sử dụng thuộc tính style.

Đây là một ví dụ về canvas rỗng:

Ví dụ

<canvas id="myCanvas" width="200" height="100"></canvas>

Xem kết quả

Thêm JavaScript

Sau khi tạo vùng canvas hình chữ nhật, chúng ta thêm JavaScript để vẽ.

Ví dụ: Vẽ một đường thẳng

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

Xem kết quả

Ví dụ: Vẽ một vòng tròn

<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>

Xem kết quả

Ví dụ: Vẽ chữ hello world

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
</script>

Xem kết quả

Ví dụ: Vẽ thêm nét chữ hello world

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
</script>

Xem kết quả

Ví dụ: Vẽ một hình ảnh

<script>
function myCanvas() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img,10,10);
}
</script>