Canvas drawImage() 方法

Manwal sa Canvas

定義和用法

drawImage() 方法在畫布上繪製圖像、畫布或視頻。

drawImage() 方法也能夠繪製圖像的某些部分，以及/或者增加或減少圖像的尺寸。

實例

範例 1

要使用的圖像：

tulip

向畫布上面繪製圖像：

Ang iyong browser ay hindi sumusuporta sa tag ng HTML5 canvas.

JavaScript:

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

Subukan Nang Personal na

提示：頁面底部提供更多範例。

語法

JavaScript 語法 1

在畫布上定位圖像：

context.drawImage(img,x,y);

JavaScript 語法 2

在畫布上定位圖像，并規定圖像的寬度和高度：

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

JavaScript 語法 3

剪切圖像，并在畫布上定位被剪切的部份：

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

參數值

參數 Paglalarawan
img Tukuyin ang larawan, papel o bidyo na gagamitin.
sx Opisyon. Ang x-coordinate ng pagsisimula ng pagbubukot.
sy Opisyon. Ang y-coordinate ng pagsisimula ng pagbubukot.
swidth Opisyon. Ang lapad ng binukot na larawan.
sheight Opisyon. Ang taas ng binukot na larawan.
x Ang x-coordinate ng paglalagay ng larawan sa papel.
y Ang y-coordinate ng paglalagay ng larawan sa papel.
width Opisyon. Ang lapad ng ginagamit na larawan. (Pinagsusuka o pinipit na larawan)
height Opisyon. Ang taas ng ginagamit na larawan. (Pinagsusuka o pinipit na larawan)

Higit pang mga halimbawa

Mga Halimbawa 2

Itatalaga ang lokasyon ng larawan sa papel at tukuyin ang lapad at taas ng larawan:

Ang iyong browser ay hindi sumusuporta sa tag ng HTML5 canvas.

JavaScript:

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

Subukan Nang Personal na

Mga Halimbawa 3

I-cut ang larawan at itinalaga ang lokasyon ng binukot na bahagi sa papel:

Ang iyong browser ay hindi sumusuporta sa tag ng HTML5 canvas.

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

Subukan Nang Personal na

Mga Halimbawa 4

Ginagamit na bidyo (pindutin ang play button upang magsimula ang demo):

Papel:

Ang iyong browser ay hindi sumusuporta sa tag ng HTML5 canvas.

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

Subukan Nang Personal na

Suporta ng Browser

Ang numero sa talahanan ay nagtutukoy sa unang bersyon ng browser na ganap na sumusuporta sa katangian.

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

Komentaryo:Hindi suportado ng Internet Explorer 8 at mas maaga ang <canvas> elemento.

Manwal sa Canvas