canvas 图片动画绘制

作者:日期:2017-08-13 17:59:36 点击:90

 

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.};

上一篇: CSS背景与边框(二)

下一篇: 如何编写一个轻量级的CSS框架