Phương pháp drawImage() của Canvas
Định nghĩa và cách sử dụng
drawImage() Phương pháp này vẽ ảnh, canvas hoặc video trên canvas.
drawImage() Phương pháp cũng có thể vẽ một phần của ảnh, cũng như tăng hoặc giảm kích thước của ảnh.
Thực例
Ví dụ 1
Ảnh cần sử dụng:
Vẽ ảnh lên canvas:
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 thêm các ví dụ ở phần cuối trang.
Ngữ pháp
Ngữ pháp JavaScript 1
Định vị ảnh trên canvas:
context.drawImage(img,x,y);
Ngữ pháp JavaScript 2
Định vị ảnh trên canvas và quy định chiều rộng và chiều cao của ảnh:
context.drawImage(img,x,y,width,height);
Ngữ pháp JavaScript 3
Cắt ảnh và định vị phần ảnh được cắt trên canvas:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
參數值
| 参數 | Mô tả |
|---|---|
| img | Định nghĩa hình ảnh, bảng 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 cắt. |
| sheight | Tùy chọn. Chiều cao của hình ảnh được cắt. |
| x | Vị trí x của hình ảnh trên bảng. |
| y | Vị trí y của hình ảnh trên bảng. |
| width | Tùy chọn. Chiều rộng của hình ảnh cần sử dụng. (Phun 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. (Phun hoặc thu nhỏ hình ảnh) |
More examples
Ví dụ 2
Định vị hình ảnh trên bảng và quy đị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:
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:
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 sớm hơn không hỗ trợ phần tử <canvas>.
