HTML canvas drawImage() 方法
定义和用法
drawImage() 方法在画布上绘制图像、画布或视频。
drawImage() Ang paraan ay maaari ring magdraw ng ilang bahagi ng larawan, at/maari ring dagdagan o bawasan ang laki ng larawan.
Example
Halimbawa 1
Ginagamit na larawan:
Draw the image on the top of the canvas:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);
Tip:More examples are provided at the bottom of the page.
Syntax
JavaScript Syntax 1
Locate the image on the canvas:
context.drawImage(img,x,y);
JavaScript Syntax 2
Locate the image on the canvas and specify the width and height of the image:
context.drawImage(img,x,y,width,height);
JavaScript Syntax 3
Cut the image and locate the cut part on the canvas:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
Parameter value
| Parameter | Description |
|---|---|
| img | Takda ang larawan, kanvas o video na gagamitin. |
| sx | Optional. X-coordinate ng pagsisikutyo ng pagsisikutyo. |
| sy | Optional. Y-coordinate ng pagsisikutyo ng pagsisikutyo. |
| swidth | Optional. Lapad ng larawan na ginawa ng cut. |
| sheight | Optional. Taas ng larawan na ginawa ng cut. |
| x | X-coordinate ng posisyon ng larawan sa kanvas. |
| y | Y-coordinate ng posisyon ng larawan sa kanvas. |
| width | Optional. Lapad ng larawan na gagamitin. (Pinabilisan o pinaliit ang larawan) |
| height | Optional. Taas ng larawan na gagamitin. (Pinabilisan o pinaliit ang larawan) |
More examples
Halimbawa 2
I-locate ang larawan sa kanvas, at itakda ang lapad at taas ng larawan:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);
Halimbawa 3
Icut ang larawan, at i-locate ang ginawang cut sa kanvas:
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);
Halimbawa 4
Video na gagamitin (pindutin ang play button upang magsimula ang demo):
Kanvas：
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);
การสนับสนุนโดยบราวเซอร์
ตัวเลขในตารางนี้บอกเราเวอร์ชั่นบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
หมายเหตุ：Internet Explorer 8 และเวอร์ชั่นต่อไปของมันไม่สนับสนุนสมรรถนะ <canvas>。
