Canvas

Canvas之画图板 先设计好基本的画布，以及需要的 css 和 html 。 接着就是根据 html 来添加相应的点击事件。前面几个可以合并为一个点击事件，只需要在切换属性时切换相关的自定义属性。在

Canvas之贪吃蛇 贪吃蛇包括棋盘，蛇（蛇头和身体），食物。棋盘作为静态的，其他设置为动态。定义每个格子大小，绘制竖线和横线。 然后开始绘制组成蛇和食物的矩形，给定绘制一个矩形的参数，然后是绘制蛇头

Canvas之粒子烟花 需要有烟花主体，上升的小球，烟花绽放的粒子。这些都是一个个对象，所以使用面向对象的结构。 烟花是由一排小球组成。先调整坐标系，变成向上的坐标系。这些小球的y坐标不断减小，半径也

Canvas之状态存储与重置 我们在使用多种样式绘制图形时，有时需要回到之前的样式去进行设置，因为样式的设置有时是一层套一层的。如果我们使用手动的方式去重新调整样式。但这种方式不好。 第一，可读性，可

Canvas之图形变换 图形变换可以分为移动，旋转，放缩，以及矩阵斜切。 图形移动 这里模拟了一个坐标系，可以看到，当使用 ctx.translate 时，整个坐标系都会进行移动，第一个参数是x偏移，

Canvas之滤镜 Canvas 提供了封装好的滤镜，不同于 svg 可以进行详细的编辑。使用 ctx.filter 属性可以进行一种或者多种滤镜的配置。 blur 配置模糊度，数值越大越模糊。 br

Canvas之图形阴影 设置一个图形的阴影有四个 API 。ctx.shadowBlur 设置图形的模糊程度，数值越大，模糊程度越高。ctx.shadowColor 设置阴影颜色，ctx.shadow

Canvas之颜色渐变 线性渐变 我们使用 ctx.createLinearGradient 来创建一个渐变对象，可以传入两个点的坐标，来表示渐变的方向。渐变方向可以是横向，纵向或者斜向，但这个坐标是

Canvas之刮刮乐 利用了图像合成中的 destination-out 。它会显示两张图片中前面图片不重叠的部分，当我们在使用鼠标移动的时候，重叠的部分不会显示，显示出底层的中奖图片。不重叠的部分会

Canvas之图像合成 我们可以将前后两个图像进行合成。通过设置 ctx.globalCompositeOperation 可以选择图片合成的方式，这里指的是路径合成。设置时需要放在前后两个图形中间。

Canvas之图形裁剪 我们想要裁剪一个图形。需要先设置好裁剪路径，然后设置 ctx.clip() ，之后绘制的图形将都会被裁剪。之前绘制的图形不受影响。为了更好的设置裁剪路径，所以将 ctx.cli

Canvas之使用图像 Canvas 可以引入图像，可以是image，video，canvas 格式。image 可以是图片路径或者是base64格式。 当我们创建了一个图片之后，需要在图片加载之后进

Canvas之绘制图形后续 Canvas 提供了一些线条 API ，它可以设置 ctx.lineCap 线条的端点，ctx.lineJoin 线条的折线连接处，ctx.miterLimit 控制线条折

Canvas之绘制图形 绘制矩形 这是绘制矩形的方式。可以绘制填充矩形，描边矩形，以及混合矩形。使用立即执行函数使得各个部分不会相互影响，不会出现变量冲突。 混合矩形的时候先设置好 rect 基本信息

Canvas之概述，画布与画笔 概述 Canvas 解决了之前使用 flash 带来的兼容性，性能和开发成本的问题。 Canvas 是一个标签，并不能绘制图形，它需要使用 Canvas API 才能进