更多实例
例子 1
在画布上对图像进行定位,然后规定图像的宽度和高度:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);
例子 2
剪切图片,并在画布上对被剪切的部分进行定位:
Your browser does not support the HTML5 canvas tag.
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
要使用的视频(请按下播放键以开始演示):
画布:
Your browser does not support the HTML5 canvas tag.
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);