实例要使用的图片: 向画布上面绘制图片: JavaScript: var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
浏览器支持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); 参数值
更多实例例子 1在画布上对图像进行定位,然后规定图像的宽度和高度: JavaScript: var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
例子 2剪切图片,并在画布上对被剪切的部分进行定位: JavaScript: var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
例子 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()
{ |
|