canvas实现行人走路的动画（完整实现）

本文链接：https://blog.csdn.net/u011350550/article/details/85285428

本文通过canvas展示了如何制作行人走路的动画效果。利用不同的帧图片循环播放，结合CSS精灵技术减少HTTP请求，提高页面性能。在canvas中，通过背景定位获取需要的图片部分，实现了行走动画。在现代前端工程中，类似优化常通过工具如webpack的url-loader将小图片转为BASE64编码。代码源码已提供，欢迎提问交流。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看下效果，然后再说如何实现，最终效果如下：

我们知道动画其实是不同的图片循环替换，造成视觉上图片在动。

我们制作这个动画的素材如下：

从右至左，就是一个人的行走的所有动作，抬腿，迈步,脚落下，另一只脚迈步，然后循环如此。

我们将图中的五个动作图截出来，循环播放，效果就如下：

可以看出，这是一个原地踏步的动作，如果给图片加上位移，就是行走的效果。

这里讲一个知识点:Css spirit。

我们刚刚已经讲了，动画是5个动作的合成，应该有5张图片，现在我们将5张图片放在一张图片里，需要时截取图片的部分，就可以获取所需实际图片了。

这么做的原因是：

在实际的web应用中，页面上可能有上百张甚至好几百张图片，如果每张图片都是单独的，就需要建立几百个http连接，每个连接的建立都需要耗费一定时间，几个个连接的时间浪费是非常大的。我们可以把多张图片合成到一张大的图片中，然后通过CSS中的背景定位等技术，把背景定位到实际的图片位置，就可以得到所需图片了（canvas也可以利用这种思想）。这样可以节省大量的连接建立时间。是前端优化的一部分。

当然，现在我们使用各种工具构建前端工程，打包时会将很多小图标直接转成BASE64编码。
(例如，webpack, 使用url-loader插件，设置limit，打包时，将所有小于limit的图片进行BASE64编码)。

源码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>walk</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <canvas width="500" height="400" id="canvas" style="margin-top: 200px;"></canvas>
  <img src=