Canvas HTML5
- Trang trước Thuộc tính biểu mẫu đầu vào HTML
- Trang tiếp theo HTML5 SVG
Phần tử canvas được sử dụng để vẽ hình vẽ trên trang web.
Canvas là gì?
Phần tử canvas của HTML5 sử dụng JavaScript để vẽ hình ảnh trên trang web.
Khung vẽ là một vùng hình vuông, bạn có thể kiểm soát mỗi pixel của nó.
Canvas có nhiều phương thức vẽ đường dẫn, hình vuông, hình tròn, văn bản và thêm hình ảnh.
Tạo phần tử Canvas
Thêm phần tử canvas vào trang HTML5.
Định nghĩa id, độ rộng và độ cao của phần tử:
<canvas id="myCanvas" width="200" height="100"></canvas>
Vẽ bằng JavaScript
Phần tử canvas tự thân không có khả năng vẽ. Tất cả công việc vẽ phải được hoàn thành trong JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript sử dụng id để tìm kiếm phần tử canvas:
var c=document.getElementById("myCanvas");
Sau đó, tạo đối tượng context:
var cxt=c.getContext("2d");
Đối tượng getContext("2d") là đối tượng built-in của HTML5, có nhiều phương thức để vẽ đường dẫn, hình vuông, hình tròn, văn bản và thêm hình ảnh.
Dưới đây là hai dòng mã vẽ một hình vuông đỏ:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
Phương thức fillStyle làm cho nó có màu đỏ, phương thức fillRect quy định hình dạng, vị trí và kích thước.
Hiểu tọa độ
Phương thức fillRect trên cùng có các tham số (0,0,150,75).
Ý nghĩa là: Vẽ một hình vuông 150x75 từ góc trên cùng bên trái (0,0).
Như hình dưới đây, tọa độ X và Y của canvas được sử dụng để định vị họa tiết trên canvas.
Những ví dụ Canvas khác
Dưới đây là một số ví dụ khác về việc vẽ trên phần tử canvas:
Mẫu - Đường thẳng
Vẽ một đường thẳng bằng cách quy định điểm bắt đầu và điểm kết thúc:
Mã JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
Thành phần canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Trình duyệt của bạn không hỗ trợ thành phần canvas. </canvas>
Mẫu - Vòng tròn
Vẽ một vòng tròn bằng cách quy định kích thước, màu sắc và vị trí:
Mã JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
Thành phần canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Trình duyệt của bạn không hỗ trợ thành phần canvas. </canvas>
Mẫu - Mờ dần
Sử dụng màu sắc bạn đã chỉ định để vẽ nền phông mờ dần:
Mã JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
Thành phần canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Trình duyệt của bạn không hỗ trợ thành phần canvas. </canvas>
Mô hình - Hình ảnh
Đặt một hình ảnh lên canvas:
Mã JavaScript:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
</script>
Thành phần canvas:
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> Trình duyệt của bạn không hỗ trợ thẻ canvas HTML5. </canvas>
Hướng dẫn HTML Canvas
Nếu bạn muốn học thêm về canvas, hãy truy cập trang của chúng tôi Hướng dẫn HTML Canvas.
Trang liên quan
Tài liệu tham khảo:Thẻ <canvas> HTML 5
Tài liệu tham khảo:Đối tượng Canvas của HTML DOM
- Trang trước Thuộc tính biểu mẫu đầu vào HTML
- Trang tiếp theo HTML5 SVG
