HTML5 Canvas
- 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 khu vực hình vuông, bạn có thể kiểm soát mỗi pixel.
Canvas có nhiều phương thức vẽ đường dẫn, hình vuông, hình tròn, ký tự 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本身 không có khả năng vẽ. Tất cả công việc vẽ phải 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 nội bộ 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 về tọa độ
Phương thức fillRect trên cùng có các tham số (0,0,150,75).
Ý nghĩa là: Vẽ 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>
Đối tượng 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ợ đối tượng 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>
Đối tượng 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ợ đối tượng 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>
Đối tượng 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ợ đối tượng canvas. </canvas>
Mô hình - Ảnh
Đặt một bức ả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>
Đối tượng canvas:
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"></canvas> 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 Hướng dẫn HTML Canvas.
Trang liên quan
Tài liệu tham khảo:Thẻ <canvas> HTML5
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
