用户251916242711

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 。它会显示两张图片中前面图片不重叠的部分，当我们在使用鼠标移动的时候，重叠的部分不会显示，显示出底层的中奖图片。不重叠的部分会