HTML canvas drawImage() Metode
Prent om te gebruik:
Voorbeeld
Teken die prent op die doek:
JavaScript:
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die metode ten volle ondersteun.
Method | |||||
---|---|---|---|---|---|
drawImage() | Yes | 9.0 | Yes | Yes | Yes |
Definisie en gebruik
Die drawImage() metode teken 'n prent, doek of video op die doek.
Die drawImage() metode kan ook dele van 'n prent teken, en/of die prentgrootte vergroot/verklein.
Let wel: Jy kan nie die drawImage() metode oproep voordat die prent gelaai is nie. Om te verseker dat die prent gelaai is, kan jy drawImage() van window.onload() of vanaf document.getElementById(" imageID ").onload bel.
JavaScript-sintaksis
Plaas die prent op die doek:
JavaScript syntax: | context.drawImage(img,x,y); |
---|
Plaas die prent op die doek en spesifiseer die breedte en hoogte van die prent:
JavaScript syntax: | context.drawImage(img,x,y,width,height); |
---|
Knip die prent en plaas die geknipte deel op die doek:
JavaScript syntax: | context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); |
---|
Parameterwaardes
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) |
Meer voorbeelde
Voorbeeld
Plaas die prent op die doek en spesifiseer die breedte en hoogte van die prent:
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);
};
Voorbeeld
Knip die prent en plaas die geknipte deel op die doek:
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);
};
Voorbeeld
Video om te gebruik (druk Play om die demonstrasie te begin):
Canvas:
JavaScript (die kode teken die huidige raam van die video elke 20 millisekondes):
var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
var ctx = c.getContext('2d');
var i;
v.addEventListener('play',function() {i=window.setInterval(function()
{ctx.drawImage(v,5,5,260,125)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);
❮ HTML-doekverwysing