Phương pháp drawImage() của canvas HTML
Định nghĩa và cách sử dụng
drawImage() Phương pháp vẽ hình ảnh, canvas hoặc video trên canvas.
drawImage() Phương pháp cũng có thể vẽ một phần của hình ảnh và/hoặc tăng hoặc giảm kích thước hình ảnh.
Thực tế
Ví dụ 1
Ảnh cần sử dụng:
Vẽ ảnh lên bảng vẽ từ trên xuống dưới:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img,10,10);
Lưu ý:Cung cấp nhiều ví dụ khác tại cuối trang.
Cú pháp
Cú pháp JavaScript 1
Định vị hình ảnh trên bảng vẽ:
context.drawImage(img,x,y);
Cú pháp JavaScript 2
Định vị hình ảnh trên bảng vẽ và xác định chiều rộng và chiều cao của hình ảnh:
context.drawImage(img,x,y,width,height);
Cú pháp JavaScript 3
Cắt ảnh và định vị phần đã cắt trên bảng vẽ:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
Giá trị tham số
| Tham số | Mô tả |
|---|---|
| img | Xác định hình ảnh, bảng vẽ hoặc video cần sử dụng. |
| sx | Tùy chọn. Vị trí x bắt đầu cắt. |
| sy | Tùy chọn. Vị trí y bắt đầu cắt. |
| swidth | Tùy chọn. Chiều rộng của hình ảnh đã cắt. |
| sheight | Tùy chọn. Chiều cao của hình ảnh đã cắt. |
| x | Vị trí x của hình ảnh trên bảng vẽ. |
| y | Vị trí y của hình ảnh trên bảng vẽ. |
| width | Tùy chọn. Chiều rộng của hình ảnh cần sử dụng. (Giãn hoặc thu nhỏ hình ảnh) |
| height | Tùy chọn. Chiều cao của hình ảnh cần sử dụng. (Giãn hoặc thu nhỏ hình ảnh) |
Các ví dụ khác
Ví dụ 2
Định vị hình ảnh trên bảng vẽ và xác định chiều rộng và chiều cao của hình ảnh:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);
Ví dụ 3
Cắt ảnh và định vị phần đã cắt trên bảng vẽ:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,90,130,90,80,20,20,90,80);
Ví dụ 4
Video cần sử dụng (bấm nút phát để bắt đầu trình diễn):
Bảng vẽ:
JavaScript (mỗi 20 mili giây, mã sẽ vẽ khung hiện tại của video):
var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
ctx = c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function()}
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);
Hỗ trợ trình duyệt
Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Ghi chú:Internet Explorer 8 và các phiên bản trước không hỗ trợ yếu tố <canvas>.
