Tạo một canvas
Ví dụ canvas
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
Chạy thử codestyle="border:1px solid #000000;">
</canvas>
Đ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ử codevar c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);</script>
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:
Tiếp theo, gọi hàm getContext() (Gán đặc tính "2d" cho biến ctx:
Đầ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);
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).
2 nhận xét
Write nhận xéthttp://demos.componentone.com/wijmo/5/Angular/ExcelImportExport/ExcelImportExport/
Replyhttp://demos.componentone.com/wijmo/5/Angular/ExcelImportExport/ExcelImportExport
ReplyDùng file Excel làm CSDL cho web
EmoticonEmoticon