Vẽ trên Canvas với JavaScript
Tất cả những gì vẽ trên HTML Canvas phải được thực hiện với JavaScript:
Ở bài này tôi cung cấp 1 ví dụ cơ bản nhất để chúng ta bắt đầu và soi xét các thuộc tính, phương thức.
Ở bài này tôi cung cấp 1 ví dụ cơ bản nhất để chúng ta bắt đầu và soi xét các thuộc tính, phương thức.
Ví 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
Đầu tiên, 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.
Phương thức getContext() được xây dụng trong một đối tượng HTML, với những 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.
Thiết lập fill style của đối tượng vẽ là màu đỏ:
Thiết lập fill style của đối tượng vẽ là màu đỏ:
ctx.fillStyle = "#FF0000";
Thuộc tính fillStyle có thể là một màu CSS, một dải màu, hoặc một mô hình. Mặc định fillStyle là màu đen.
Phương thức fillRect(x,y,width,height) vẽ một hình chữ nhật, được thiết lập cùng với fill style, trên canvas:
ctx.fillRect(0,0,150,75);
Trương Đức Tài.
