同样，要将video结合canvas使用的话，首先要创建HTM5中的标签元素，关于HTML5的新的标签，可以参考下文去详细学习。下面代码中并没将video标签嵌入到canvas画布中：
然后我们写一个简单的脚本，实现的功能是将video标签嵌入到画布中，
return {
draw: function () {
var video = document.getElementById(“myVideo”);
var canvas = document.getElementById(“myCanvas”);
var context = canvas.getContext(“2d”);
var width = Math.floor(canvas.clientWidth / 100);
var height = Math.floor(canvas.clientHeight / 100);
canvas.width = width; canvas.height = height;
video.play();
context.drawImage(video, 0, 0, width, height);
},
init: function () {
setInterval(canvas.draw, 16);
}
}
} ();
实现的效果是在屏幕中显示一个video播放器，播放一段动画，而同时画布的背景也是同步这段动画。具体的效果请看这个地址：http://msdeploy.net/IE9/Canvas/video.htm
形状变化和动画
形状变化和动画是canvas中十分重要的部分。下面是关于形状变化中的重要的方法：
scale(x, y) 大小缩放， x是水平方向的缩放因子，y是垂直方向的缩放因子，必须都为正数
rotate(angle) 旋转，angle是旋转的角度，旋转的中心是canvas坐标原点
translate(x, y) 移动canvas坐标
transform(m11, m12, m21, m22, dx, dy)：这个方法必须将当前的变形矩阵乘上下面的矩阵：
m11 m21 dx
m12 m22 dy
0 0 1
setTransform(m11, m12, m21, m22, dx, dy) :这个方法重置当前的变形矩阵为单位矩阵，然后以相同的参数调用 transform 方法。如果任意一个参数是无限大，那么变形矩阵也必须被标记为无限大，否则会抛出异常。
将以上的变换整合起来使用的话，会制作出很多很漂亮的效果，比如下面的代码中，效果是每隔250微秒绘制一个矩形，并且矩形是会旋转的，颜色也是随机生成的。
var canvas;
var context;
return {
draw: function () {
var r = Math.floor(Math.random() * 255) + 70;
var g = Math.floor(Math.random() * 255) + 70;
var b = Math.floor(Math.random() * 255) + 70;
var s = ‘rgba(‘ + r + ‘,’ + g + ‘,’ + b + ‘, 0.5)’;
context.rotate(0.2 * Math.PI);
context.fillStyle = s;
context.fillRect(10, 0, 150, 50);
},
init: function () {
canvas = document.getElementById(“myCanvas”);
context = canvas.getContext(“2d”);
context.translate(200, 250);
setInterval(can.draw, 250);
}
}
} ();
window.onload = can.init;
下面是静态效果图，动态效果图请看这个地址：http://msdeploy.net/IE9/Canvas/rotate.htm
▲
