Canvas drawImage() 方法
定义和用法
drawImage() 方法在画布上绘制图像、画布或视频。
drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。
实例
例子 1
要使用的图片：
向画布上面绘制图片：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);
提示：页面底部提供更多实例。
语法
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);
参数值
| 参数 | Descrizione |
|---|---|
| img | Specificare l'immagine, la tavolozza o il video da utilizzare. |
| sx | Opzionale. Posizione x di inizio della tagliatura. |
| sy | Opzionale. Posizione y di inizio della tagliatura. |
| swidth | Opzionale. Larghezza dell'immagine tagliata. |
| sheight | Opzionale. Altezza dell'immagine tagliata. |
| x | Posizione x dell'immagine sulla tavolozza. |
| y | Posizione y dell'immagine sulla tavolozza. |
| width | Opzionale. Larghezza dell'immagine da utilizzare. (Estendi o riduci l'immagine) |
| height | Opzionale. Altezza dell'immagine da utilizzare. (Estendi o riduci l'immagine) |
Più esempi
Esempio 2
Posiziona l'immagine sulla tavolozza e specifica le dimensioni dell'immagine:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);
Esempio 3
Taglia l'immagine e posiziona la parte tagliata sulla tavolozza:
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);
Esempio 4
Video da utilizzare (premi il pulsante riproduci per iniziare la dimostrazione):
Tavoletta:
JavaScript (ogni 20 millisecondi, il codice disegna il fotogramma corrente del video):
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);
Supporto dei browser
I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.
