Phương thức canvas drawImage () HTML

Hình ảnh sử dụng:

Tiếng hét

Thí dụ

Vẽ hình ảnh lên canvas:

JavaScript:

window.onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 10, 10);
};

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phương pháp này.

Method
drawImage()	Yes	9.0	Yes	Yes	Yes

Định nghĩa và Cách sử dụng

Phương thức drawImage () vẽ một hình ảnh, canvas hoặc video vào canvas.

Phương thức drawImage () cũng có thể vẽ các phần của hình ảnh và / hoặc tăng / giảm kích thước hình ảnh.

Lưu ý: Bạn không thể gọi phương thức drawImage () trước khi hình ảnh được tải. Để đảm bảo rằng hình ảnh đã được tải, bạn có thể gọi drawImage () từ window.onload () hoặc từ document.getElementById (" imageID ") .onload.

Cú pháp JavaScript

Định vị hình ảnh trên canvas:

JavaScript syntax:	context.drawImage(img,x,y);

Định vị hình ảnh trên canvas và chỉ định chiều rộng và chiều cao của hình ảnh:

JavaScript syntax:	context.drawImage(img,x,y,width,height);

Kẹp hình ảnh và định vị phần đã cắt trên canvas:

JavaScript syntax:	context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Giá trị tham số

Parameter	Description	Play it
img	Specifies the image, canvas, or video element to use
sx	Optional. The x coordinate where to start clipping
sy	Optional. The y coordinate where to start clipping
swidth	Optional. The width of the clipped image
sheight	Optional. The height of the clipped image
x	The x coordinate where to place the image on the canvas
y	The y coordinate where to place the image on the canvas
width	Optional. The width of the image to use (stretch or reduce the image)
height	Optional. The height of the image to use (stretch or reduce the image)

Các ví dụ khác

Thí dụ

Định vị hình ảnh trên canvas và chỉ định chiều rộng và chiều cao của hình ảnh:

JavaScript:

window.onload = function() {
  var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 10, 10, 150, 180);
};

Thí dụ

Kẹp hình ảnh và định vị phần đã cắt trên canvas:

JavaScript:

window.onload = function() {
var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 90, 130, 50, 60, 10, 10, 50, 60);
};