Canvas trong HTML5 - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Canvas trong HTML5

HTML5

Hướng dẫn HTML

Biểu mẫu HTML

Đồ họa HTML

Phương tiện ghi HTML

HTML APIs

Tài nguyên 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ó cho thấy bốn phần 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ử <canvas> <HTML> được sử dụng để vẽ đồ hoạ, trực quan, qua JavaScript. Phần tử <canvas> chỉ là một vùng chứa đồ hoạ. 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.

Trình duyệt hỗ trợ

Các con số trong bảng xác định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <canvas>.

Ví dụ về Canvas

Canvas là một vùng chữ nhật trên một trang HTML. Theo mặc định, canvas không có đường viền và không có nội dung. Tham khảo ví dụ sau:

<canvas id=”myCanvas” width=”200″ height=”100″></canvas>

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

Dưới đây là ví dụ về một khung canvas trống cơ bản:

<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #000000;”>
</canvas>

 

Vẽ một đường kẻ

var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Vẽ một đường tròn

var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Vẽ một đoạn văn bản

var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
ctx.font = “30px Arial”;
ctx.fillText(“Hello World”,10,50);

 

Văn bản Stroke

var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
ctx.font = “30px Arial”;
ctx.strokeText(“Hello World”,10,50);

 

Vẽ tuyến tính Gradient

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

Vẽ Circular Gradient

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

Vẽ hình ảnh

var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
var img = document.getElementById(“scream”);
ctx.drawImage(img,10,10);