Bản vẽ Canvas HTML
Vẽ trên Canvas bằng JavaScript
Tất cả các bản vẽ trên canvas HTML phải được thực hiện bằng JavaScript:
Thí dụ
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Bước 1: Tìm phần tử Canvas
Trước hết, bạn phải tìm phần tử <canvas>.
Điều này được thực hiện bằng cách sử dụng phương thức HTML DOM getElementById ():
var canvas = document.getElementById("myCanvas");
Bước 2: Tạo một đối tượng vẽ
Thứ hai, bạn cần một đối tượng vẽ cho canvas.
GetContext () là một đối tượng HTML được tích hợp sẵn, với các thuộc tính và phương thức để vẽ:
var ctx = canvas.getContext("2d");
Bước 3: Vẽ trên Canvas
Cuối cùng, bạn có thể vẽ trên canvas.
Đặt kiểu tô của đối tượng vẽ thành màu đỏ:
ctx.fillStyle = "#FF0000";
Thuộc tính fillStyle có thể là màu CSS, gradient hoặc mẫu. FillStyle mặc định là màu đen.
Phương thức fillRect ( x, y, width, height ) vẽ một hình chữ nhật với kiểu tô màu trên canvas:
ctx.fillRect(0, 0, 150, 75);