canvas 图片动画绘制

绘制简单图像

• 语法: CanvasRenderingContext2D.drawImage( img, dx, dy )
• 描述: 
  
  • 使用三个参数, 允许在画布上的 任意位置 绘制图片.
  • 参数 img 是指图片对象. 可以是 img 标签, 或者是 video 标签, 已经另一个 canvas 等.
  • 需要注意的是如果直接添加 img 对象是不可以的, 需要等待其加载.
  • 准备一张网络图片, 绘制, 便于查看其加载过程.

1.// 随便从百度中搜索 '美女头像', 记录一个链接地址
2.var url = 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3289155966,3850025949&fm=116&gp=0.jpg';
3.// 创建 img 对象
4.var img = new Image(); // 就是 img 标签
5.// 设置 src 属性为 图片
6.img.src = url;
7.// 绘图
8.ctx.drawImage( img, 100, 100 );

在指定区域内绘制图像

• 语法: CanvasRenderingContext2D.drawImage( img, dx, dy, dWidth, dHeight )
• 描述: 
  
  • 参数 dWidth, dHeight 表示绘制的矩形区域. 绘制的 dx, dy 坐标决定了开始.
  • 该方法绘制的图像会在指定范围内被压缩显示.
  • 将上面的图绘制在 100 * 100 的范围内. ctx.drawImage( img, 100, 100, 100, 100 );

绘制任意图像

• 语法: CanvasRenderingContext2D.drawImage( img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight )
• 描述: 这里的带有 s 前缀的参数就是指图源的矩形区域. 
  
  • 例如将图片的 ( 100, 100, 300, 200 ) 处的内容绘制到页面的 ( 100, 100, 300, 200 ) 的位置.
  • ctx.drawImage( img, 100, 100, 300, 200, 100, 100, 300, 200 );

绘制动画

• 有了图片部分绘制的功能, 我们就可以尝试绘制动画了. 准备一张图片
• 然后开始的时候绘制第一行的第一张图. 计算它的坐标与宽高

1.var img = new Image();
2.img.src = './imgs士兵(1).png'
3.img.onload = function () {
4.var width = img.width / 4;
5.var height = img.heigth / 4;
6.// 第一张图的顶点是 0, 0, 宽高是 width, height
7.};

那么第一行的第二张图就是 ( 0, width, width, height ), 第三张就是 ( 0, width * 2, width, height ). 因此第一行的第 i 张图就是

1.var x = 0;
2.var y = width * ( i - 1 );

同理得到, 第 j 列的 x 坐标是 height * ( j - 1 )

现在绘制第一张图

1....
2.var img = new Image();
3.img.src = './imgs/士兵(1).png'
4.img.onload = function () {
5.    var width = img.width / 4;
6.    var height = img.height / 4;
7.
8.    ctx.drawImage( img, 0, 0, width, height, 100, 100, width, height ); 
9.};

现在要求, 每隔 200 毫秒就切换一张图片, 现在只考虑第一行的图片.

1.var img = new Image();
2.img.src = './imgs/士兵(1).png'
3.img.onload = function () {
4.    var width = img.width / 4;
5.    var height = img.height / 4;
6.
7.    var i = 0;
8.    setInterval(function () {
9.        ctx.clearRect( 0, 0, cas.width, cas.height );
10.        ctx.drawImage( img, width * (i++ % 4), 0, width, height, 100, 100, width, height );
11.    }, 200 );
12.};