Canvas drawImage() metod

Canvas referenshandbok

Definition och användning

drawImage() Metoden ritar en bild, 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

Tillägg bild till canvas:

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 på sidan botten.

语法

JavaScript syntax 1

定位图像在画布上：

context.drawImage(img,x,y);

JavaScript syntax 2

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

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

JavaScript syntax 3

Skär en bild och定位er den skärda delen på canvas:

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

参数值

参数 Beskrivning
img Specificera det bild, canvas eller video som ska användas.
sx Valfritt. Börja skära x-koordinatpositionen.
sy Valfritt. Börja skära y-koordinatpositionen.
swidth Valfritt. Skärs bildbredd.
sheight Valfritt. Skärs bildhöjd.
x X-koordinatpositionen för att placera bilden på ritbordet.
y Y-koordinatpositionen för att placera bilden på ritbordet.
width Valfritt. Användbart bildbredd. (Strecka ut eller förstora bilden)
height Valfritt. Användbart bildhöjd. (Strecka ut eller förstora 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

Användbart video (tryck på spela-knappen för att börja demonstrationen):

Ritbord:

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

JavaScript （每 20 毫秒，代码就会绘制视频的当前帧）：

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

Numreringen i tabellen anger den första webbläsarversionen som helt stöder denna egenskap.

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 äldre versioner stöder inte <canvas>-elementet.

Canvas referenshandbok