Tô màu nền - viết chữ cho canvas

Your browser does not support the HTML5 canvas tag. Your browser does not support the HTML5 canvas tag. Your browser does not support the HTML5 canvas tag.

Làm ảnh động bằng canvas

Trước tiên tạo một vùng canvas, và gạn ID cho nó
Dùng JS để điều khiển ID canvas. Tham khảo ở đâyhoặcở đây

Điều kiển một canvas

Tạo một canvas

Ví dụ canvas

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">

</canvas>
Chạy thử code

Điều khiển (Vẽ lên) Canvas bằng JavaScript

Tất cả các thao tác vẽ lên trên canvas phải được thực hiện bằng JavaScript:

Ví dụ canvas

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Chạy thử code
Giải thích ví dụ:

Đầu tiên, tìm tới phần tử <canvas>, lưu đối tượng vào một biến c:

var c = document.getElementById("myCanvas");

Tiếp theo, gọi hàm getContext() (Gán đặc tính "2d" cho biến ctx:

var ctx = c.getContext("2d");
Đối tượng trả về của hàm getContext("2d") được lưu trong ctx là một đối tượng được xây dựng sẵn của HTML5 cùng với rất nhiều thuộc tính và hàm phục vụ cho việc vẽ các đường thẳng, hộp, vòng tròn, viết chữ, hình ảnh...
Hai dòng mã tiếp theo vẽ ra một hình chữ nhật màu đỏ:
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
Đặc tính fillStyle có thể là một mã màu CSS, một gradient hoặc một pattern. Giá trị mặc định của fillStyle là #000000 (màu đen).
Hàm fillRect(x,y,width,height) vẽ ra một hình chữ nhật được đổ màu với định dạng màu hiện tại (fillStyle).
Previous
Next Post »

2 nhận xét

Write nhận xét
lúc 02:32 13 tháng 9, 2015 delete

http://demos.componentone.com/wijmo/5/Angular/ExcelImportExport/ExcelImportExport/

Reply
avatar
Nặc danh
AUTHOR
lúc 02:34 13 tháng 9, 2015 delete

http://demos.componentone.com/wijmo/5/Angular/ExcelImportExport/ExcelImportExport
Dùng file Excel làm CSDL cho web

Reply
avatar