乐夫天命兮的博客

常见的 Canvas 优化方法避免浮点数的坐标点绘制图形时，长度与坐标应选取整数而不是浮点数，原因在于 Canvas 支持半个像素绘制。会根据小数位实现插值算法实现绘制图像的反锯齿效果，如果没有必要请不要选择浮点数值。使用多层画布去画一个复杂的场景一般在游戏中这个优化方式会经常使用，但是在我们的背景特效中不经常使用，这个优化方式是将经常移动的元素和不经常移动的元素分层，避免不必要的重绘。比如在游戏中，背景不经常变换和人物这些经常变换的元素分成不同的层，这样需要重绘的资源就会少很多。用 CSS

经过第 1 节的介绍，你应该了解Canvas 的介绍Canvas 提出的背景Canvas 和其他在 Web 中显示图像的技术的区别你应该已经明白 Canvas 究竟是什么和 Canvas 的大致用途。(づ｡◕‿‿◕｡)づ这一节将为你展示 30+ 个 Canvas 实例，让你感受下 Canvas 的强大作用。绘制图表绘制图表应该是 Canvas 最为实用的功能之一了吧(๑•̀ㅂ•́)و✧因为 Canvas 通过 JavaScript 可以动态传入参数绘制图形，所以我们可以使用 Canvas

前一段学习了一个学知识的方法论，个人觉得很有用，推荐给大家，就是在学习一个概念的时候，先问一下这个知识的概念是什么，然后再看一下这个知识它被提出来的目的是什么，然后如果你能将其用一句话说清楚，那么你就理解了该知识点。所以对于什么是 Canvas，我们也按照这个方法来分析。什么是 Canvas在 MDN 中是这样定义 <canvas> 的：<canvas> 是 HTML5 新增的元素，可用于通过使用 JavaScript 中的脚本来绘制图形。例如，它可以用于绘制图形、制作照

常见的 Canvas 优化方法避免浮点数的坐标点绘制图形时，长度与坐标应选取整数而不是浮点数，原因在于 Canvas 支持半个像素绘制。会根据小数位实现插值算法实现绘制图像的反锯齿效果，如果没有必要请不要选择浮点数值。使用多层画布去画一个复杂的场景一般在游戏中这个优化方式会经常使用，但是在我们的背景特效中不经常使用，这个优化方式是将经常移动的元素和不经常移动的元素分层，避免不必要的重绘。比如在游戏中，背景不经常变换和人物这些经常变换的元素分成不同的层，这样需要重绘的资源就会少很多。用 CSS