Bài 6 - Vẽ ảnh trên HTML Canvas


Canvas - Images

Ở bài này mình sẽ hướng dẫn cách làm thế nào để vẽ một ảnh lên trên một canvas. Để làm được điều này chúng ta sẽ sử dụng phương thức dưới đây:

drawImage(image,x,y)

Ví dụ

The Scream

JavaScript:
window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 10, 10);
};
Xem demo »

Lưu ý rằng bạn không thể vẽ được ảnh trước khi ảnh đã được tải. Gọi hàm từ window.onload().

Ở những bài tiếp theo mình sẽ hướng dẫn các bạn chi tiết từng bước để tạo ra một chiếc đồng hồ treo tường bằng Canvas. Các bạn chờ nhé!


Trương Đức Tài.