7-2 使用canvas绘制动画人物

将一张长图上的人物，使drawImage方法裁切出来，并绘制在canvas画布上。开启定时器，每隔50毫秒裁切并绘制一个人物的帧动作，当人物动作为最后一帧时，切换至第一帧，实现人物动画效果。

1.1 HTML

设置canvas画布宽高分别为600px,400px

  <canvas id="canvas" width="600" height="400"></canvas>

1.2 JavaScript

由于图片加载和绘制图片是异步方法，浏览器可能会在图片还没有加载完成时直接绘制图片，会发生报错，因此可以将绘制图片放置在图片的onload方法中，onload方法中的代码在图片加载完成后自动执行。

1.  
   // 获取画布的上下文对象
2.  
   const context = document.querySelector('#canvas').getContext('2d');
3.  
   // 创建图片对象
4.  
   const img = new Image();
5.  
   // 设置图片路径
6.  
   img.src = "./3.jpg";
7.  
   // 定义并初始化变量i
8.  
   let i = 0;
9.  
   // onload:图片加载完成后自动执行
10.  
    img.onload = function () {
11.  
    // 开启一个定时器，每个50毫秒执行一次
12.  
    setInterval(() => {
13.  
    // constext.drawImage(Image, dX, dY, dWidth, dHeight，x，y,width,height);
14.  
    // 参数 Image: 图片对象; dX, dY:裁切起点的坐标; dWidth, dHeight: 裁切尺寸; x,y: 绘制起点的坐标; width,height: 绘制尺寸
15.  
    //绘制图片
16.  
    context.drawImage(img, i * 185, 0, 180, 325, 210, 35, 180, 325);
17.  
    //i自加，用于绘制下一帧
18.  
    i ;
19.  
    //如果为最后一帧，切换至第一帧
20.  
    if (i > 7) {
21.  
    i = 0;
22.  
    }
23.  
    }, 50);
24.  
    }

 1.3 图片素材：

这篇好文章是转载于：学新通技术网