HTML canvas drawImage() metod

HTML5 Canvas-referencehandbok

Definition och användning

drawImage() Metoden ritar bilder, canvas eller video på canvas.

drawImage() Metoden kan också rita vissa delar av bilden samt/eller öka eller minska bildens storlek.

Exempel

Exempel 1

Att använda bild:

tulip

Rita bilden över canvasen:

Din webbläsare stöder inte HTML5 canvas-taggen.

JavaScript:

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

Prova själv

Tips:Mer exempel finns längst ner på sidan.

Syntax

JavaScript syntax 1

定位图像在画布上：

context.drawImage(img,x,y);

JavaScript syntax 2

定位图像在画布上，并规定图像的宽度和高度：

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

JavaScript syntax 3

Skär bild och定位画布上剪切的部分：

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

Parametervärde

Parameter Beskrivning
img Definiera det som används för bild, canvas eller video.
sx Valfritt. Börja skära x-koordinatpositionen.
sy Valfritt. Börja skära y-koordinatpositionen.
swidth Valfritt. Skärd bildens bredd.
sheight Valfritt. Skärd bildens höjd.
x X-koordinatpositionen för att placera bilden på canvas.
y Y-koordinatpositionen för att placera bilden på canvas.
width Valfritt. Bildens bredd att använda. (Strecka ut eller förminska bilden)
height Valfritt. Bildens höjd att använda. (Strecka ut eller förminska bilden)

Mer exempel

Exempel 2

定位图像在画布上，然后规定图像的宽度和高度：

Din webbläsare stöder inte HTML5 canvas-taggen.

JavaScript:

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

Prova själv

Exempel 3

Skär bild, och定位画布上剪切的部分：

Din webbläsare stöder inte HTML5 canvas-taggen.

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

Prova själv

Exempel 4

Att använda video (tryck på play-knappen för att börja demonstrationen):

Canvas:

Din webbläsare stöder inte HTML5 canvas-taggen.

JavaScript (varje 20 millisekund ritar koden aktuellt videofrämje):

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

Prova själv

Webbläsarstöd

Numrerna i tabellen anger den första versionen av webbläsaren som helt stöder egenskapen.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Kommentar:Internet Explorer 8 och tidigare versioner stöder inte <canvas>-elementet.

HTML5 Canvas-referencehandbok