HTML5 canvas drawImage() 方法
实例
片：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 drawImage() 方法。
注释：Internet Explorer 8 <canvas> 元素。
drawImage() 频。
drawImage() 以及/尺寸。
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);
参数值
| 参数 | 描述 |
|---|---|
| img | |
| sx | 剪切的 x |
| sy | 剪切的 y |
| swidth | 度。 |
| sheight | 度。 |
| x | 置图像的 x |
| y | 置图像的 y |
| width | 像） |
| height | 像） |
更多实例
例子 1
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);
例子 2
位：
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);
例子 3
画布：
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);