Canvas trong HTML5
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 ...
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” awidth=”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 awidth 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” awidth=”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);
- Học lập trình front-end cơ bản với bootstrap 4/html5/css3
- Học lập trình front-end nâng cao qua Project thực tế
- Học thiết kế web với Photoshop, CSS theo kiểu SASS
- Học cách sử dụng Git_hub cho lập trình viên
- Học lập trình Back-end PHP theo mô hình MVC cơ bản
- Học lập trình Back-end PHP theo mô hình MVC nâng cao
- Học lập trình Cơ sở dữ liệu với AngularJS
- Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
- Combo lập trình front-end từ cơ bản – nâng cao
- Combo lập trình back-end từ cơ bản đến nâng cao
- Combo lập trình web với word press từ A-Z
