用户251916242711

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 控制线条折