canvas从0开始（一）

什么是canvas

<canvas> 是 HTML5 新增的元素，可用于通过使用 JavaScript 中的脚本来绘制图形。例如，它可以用于绘制图形、制作照片、创建动画，甚至可以进行实时视频处理或渲染。<canvas> 只是一个画布，本身并不具有绘图的能力，绘图必须使用 JavaScript 等脚本语言。

<canvas> 标签允许脚本语言动态渲染位图像。 标签创建出了一个可绘制区域，JavaScript 代码可以通过一套完整的绘图功能类似于其他通用二维的 API 访问该区域，从而生成动态的图形。可以认为 标签只是一个矩形的画布。JavaScript 就是画笔，负责在画布上画画。

提前引入一下   如何在网页上画一个圆

大概有以下几种方法：

• 直接使用图片，如果需求只是显示一个圆形，那么可以直接使用图片
• 使用 div + CSS3 的 border + border-radius 模拟一个圆
• 使用 svg。可能对于很多前端来说，svg 和 png、jpg 等其他图片格式是一样的，但其实还是有一定的差别
• Canvas + JavaScript 动态画一个圆

分析一下以上几种方式的优劣性：

• 使用图片可以说是以上几种方式中排名倒数第一的了，因为直接使用图片首先会增加一次请求（制作成精灵图另说），其次是不易更改，如果想换一种颜色就需要更换图片，代价太大
• 使用 div + CSS3 的方式适用于单个的圆，实现起来比较简单，代价也比较小，但增加了一个没有意义的 DOM 节点，不符合语义化编程规范
• 使用 svg 和 Canvas 都可以使用脚本语言来动态写入一个圆

svg 和 Canvas 的区别

svg（Scalable Vector Graphics，可缩放矢量图形）是基于 XML（可扩展标记语言，标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由 W3C（万维网联盟）制定，是一个开放标准

svg 本质上是一种使用 XML 描述 2D 图形的语言。

svg 创建的每一个元素都是一个独立的 DOM 元素，既然是独立的 DOM 元素，那么我们就可以通过 css 和 JavaScript 来操控 dom。可以对每一个 DOM 元素进行监听。

并且因为每一个元素都是一个 DOM 元素，所以修改 svg 中的 DOM 元素，系统会自动进行 DOM 重绘。

Canvas 通过 JavaScript 来绘制 2D 图形，Canvas 只是一个 HTML 元素，其中的图形不会单独创建 DOM 元素。因此我们不能通过 JavaScript 操控 Canvas 内单独的图形，不能对其中的具体图形进行监控。

在 Canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

实际上 Canvas 是基于像素的即时模式图形系统，绘制完对象后不保存对象到内存中，当再次需要这个对象时，需要重新绘制；svg 是基于形状的保留模式图形系统，绘制完对象后会将其保存在内存中，当需要修改这个对象信息时，直接修改就可以了。这种根本的区别导致了很多应用场景的不同。

Canvas	svg
依赖分辨率（位图）	不依赖分辨率（矢量图）
单个 HTML 元素	每一个图形都是一个 DOM 元素
只能通过脚本语言绘制图形	可以通过 CSS 也可以通过脚本语言绘制
不支持事件处理程序	支持事件处理程序
弱的文本渲染能力	最适合带有大型渲染区域的应用程序
图面较小，对象数量较大（>10k）时性能最佳	对象数量较小 (<10k)、图面更大时性能更佳

只是对svg做一个简要的描述，感兴趣可以自己去了解一下

canvas有哪些应用场景

大概有以下几种：（所有应用在之后的更新中给大家一一分享）

绘制图表
绘制图表应该是 Canvas 最为实用的功能之一了吧(๑•̀ㅂ•́)و✧

因为 Canvas 通过 JavaScript 可以动态传入参数绘制图形，所以我们可以使用 Canvas 作为容器，通过 JavaScript 动态传入的参数将数据以图表的形式显示出来。

不仅显示更为方便，而且修改数据也同样的简单。同时也可以有一些简单的动画和交互效果，对于可视化的数据展示更为友好。

这些都是传统的 png/jpg 静态显示图片所不能比拟的

小游戏
如今人们使用手机的频率越来越高，因此用浏览器打开网址就可以玩的游戏越来越受到开发者和用户的喜爱。

而 Canvas 因其独特的性质可以说是 Web 游戏的不二之选，基本上所有的 HTML5 游戏引擎都是基于 Canvas 开发的。那么为什么会使用 Canvas 来开发游戏呢？

首先是因为 Canvas 不需要借助任何插件就可以在网页中绘图。并且其强大的绘图 API 可以操纵页面上的每一个元素

活动页面
Canvas 也可以写活动页面哦~(๑•̀ㅂ•́)و，✧这是很多公司的营销策略。
模拟转盘抽奖。点击按钮，转盘转动，然后转盘停止，指针落在哪个区域就提示中奖的奖品；刮刮乐的页面，在刮刮乐的区域，鼠标会显示为硬币的形状，然后按住鼠标并拖动，经过区域就会显示出最底层的图片，同时上层图片消失。模拟刮刮乐效果，刮开一定比例面积之后“刮奖”完成等等

小特效
canvas可以做一些小特效，装饰网站

炫酷背景
相信很多小伙伴都经常刷抖音，是不是上面会看到很多炫酷的桌面，没错，都是用canvas制作的。下载一个upupoo软件，就能将源码生成炫酷的桌面了。

因为 Canvas 的特性，所以如果网站想要一个炫酷的背景，那么 Canvas 无疑是最好的选择，一起来欣赏一下 抖音上那些canvas 做出的炫酷背景

随机生成透明度不同的气泡，气泡不断移动，渐变色的背景也在不断变换

这个特效是使用 three.js 和 Canvas 制作出的 3D 线条，随机生成的线条构建成 3D 的立体空间，还有和鼠标的交互，鼠标的移动会使得 3D 空间移动

黑客帝国的代码雨特效

渐变色，随机生成的“小星星”会从下向上移动，最重要的是和鼠标有互动。鼠标经过的地方会产生“星星”并自动和其他的星星连成线

特效很多，就不一一例举了。