## 什么是canvas 在 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API) 中是这样定义 `<canvas>` 的： > `<canvas>` 是 HTML5 新增的元素，可用于通过使用 JavaScript 中的脚本来绘制图形。例如，它可以用于绘制图形、制作照片、创建动画，甚至可以进行实时视频处理或渲染。 这里需要划重点的是，`<canvas>` 只是一个画布，本身并不具有绘图的能力，绘图必须使用 JavaScript 等脚本语言。 `<canvas>` 标签允许脚本语言动态渲染位图像。`<canvas>` 标签创建出了一个可绘制区域，JavaScript 代码可以通过一套完整的绘图功能类似于其他通用二维的 API 访问该区域，从而生成动态的图形。 ## canvas是为了解决什么 Canvas 是为了解决 Web 页面中只能显示静态图片这个问题而提出的，一个可以使用 JavaScript 等脚本语言向其中绘制图像的 HTML 标签。 ## Canvas 和 svg 的区别  就如刚刚介绍的那样，**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 > 默认的会创建300\*150的画布(单位是px) ### 方法 描述作用fill()填充路径stroke()描边arc()创建圆弧rect()绘制矩形路径区域strokeRect()绘制矩形路径描边clearRect()在给定的矩形内清除指定的像素arcTo()创建两切线之间的弧/曲线beginPath()起始一条路径，或重置当前路径moveTo()把路径移动到画布中的指定点，不创建线条lineTo()添加一个新点，然后在画布中创建从该点到最后指定点的线条closePath()创建从当前点回到起始点的路径clip()从原始画布剪切任意形状和尺寸的区域quadraticCurveTo()创建二次方贝塞尔曲线bezierCurveTo()创建三次方贝塞尔曲线isPointInPath()如果指定的点位于当前路径中，则返回 true，否则返回 false 我们可以总结出，使用 Canvas 绘制图像的步骤：  ## 如何实现刮刮乐  ### 效果