Metoda HTML canvas drawImage ()

Aby użyć zdjęcia:

Krzyk

Przykłady

Aby narysować obrazek na górze płótnie:

JavaScript:

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

Spróbuj »

Pomoc Browser

Internet Explorer 9, Firefox, Opera, Chrome i Safari wsparcie drawImage () metoda.

Uwaga: 8 i wcześniejsze wersje programu Internet Explorer nie obsługuje <canvas> elementu.

Definicja i Wykorzystanie

drawImage () w celu narysowania obrazu, wideo lub płótno na płótnie.

Niektóre fragmenty do drawImage () metoda może również zwrócić obraz i / lub zwiększyć lub zmniejszyć rozmiar obrazu.

Składnia JavaScript

Umieszczenie obrazu na płótnie:

Składnia JavaScript:	Ramy .drawImage (img, x, y);

Pozycjonowanie obraz na płótnie i określonej wysokości i szerokości obrazka:

Składnia JavaScript:	Kontekst .drawImage (img, x, y, szerokość, wysokość);

Cut obrazu i zlokalizować część cięte na płótnie:

Składnia JavaScript:	Kontekst .drawImage (img, sx, sy, swidth, sheight, x, y, szerokość, wysokość);

parametr Wartość

参数	描述
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度（伸展或缩小图像）。
height	可选。要使用的图像的高度（伸展或缩小图像）。

Więcej przykładów

Przykłady

Na płótnie pozycjonowanie obrazu, a następnie określić szerokość i wysokość obrazka:

JavaScript:

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

Spróbuj »

Przykłady

Wyciąć zdjęcie, a na płótnie o ściętych części są umieszczone:

JavaScript:

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);

Spróbuj »