Canvas合成裁剪

Canvas合成裁剪

合成

合成的图形受限于绘制的顺序。如果我们不想受限于绘制的顺序，那么我们可以利用 globalCompositeOperation 属性来改变这种情况。

globalCompositeOperation = type

type为合成的类型：

• source-over 默认值，在现有画布上下文之上绘制新图形
• source-in 新图形只在新图形和目标画布重叠的地方绘制。其他的都是透明的。
• source-atop 新图形只在与现有画布内容重叠的地方绘制
• destination-over 在现有的画布内容后面绘制新的图形
• destination-in 现有的画布内容保持在新图形和现有画布内容重叠的位置。其他的都是透明的。
• destination-out 现有内容保持在新图形不重叠的地方。
• destination-atop 现有的画布只保留与新图形重叠的部分，新的图形是在画布内容后面绘制的。
• lighter 两个重叠图形的颜色是通过颜色值相加来确定的
• copy 只显示新图形。
• xor 图像中，那些重叠和正常绘制之外的其他地方是透明的。
• multiply 将顶层像素与底层相应像素相乘，结果是一幅更黑暗的图片
• screen 像素被倒转，相乘，再倒转，结果是一幅更明亮的图片。
• overlay multiply 和 screen 的结合，原本暗的地方更暗，原本亮的地方更亮。
• darken 保留两个图层中最暗的像素。
• lighten 保留两个图层中最亮的像素
• color-dodge 将底层除以顶层的反置。
• color-burn 将反置的底层除以顶层，然后将结果反过来。
• hard-light 屏幕相乘（A combination of multiply and screen）类似于叠加，但上下图层互换了
• soft-light 用顶层减去底层或者相反来得到一个正值。
• difference 一个柔和版本的强光（hard-light）。纯黑或纯白不会导致纯黑或纯白。
• exclusion 和 difference 相似，但对比度较低。
• hue 保留了底层的亮度（luma）和色度（chroma），同时采用了顶层的色调（hue）。
• saturatio 保留底层的亮度（luma）和色调（hue），同时采用顶层的色度（chroma）。
• color 保留了底层的亮度（luma），同时采用了顶层的色调 (hue) 和色度 (chroma)。
• luminosity 保持底层的色调（hue）和色度（chroma），同时采用顶层的亮度（luma）

裁剪

裁剪的作用是遮罩，用来隐藏不需要的部分，所有在路径以外的部分都不会在 canvas 上绘制出来。

裁剪的效果和 globalCompositeOperation 属性的 source-in 和 source-atop差不多
但也有区别，最重要的区别是裁剪路径不会在 canvas 上绘制东西，而且它永远不受新图形的影响。

这些特性使得它在特定区域里绘制图形时特别好用。

clip(path, fillRule)
将当前正在构建的路径转换为当前的裁剪路径。
path为需要剪切的 Path2D 路径 fillRule为判断是在路径内还是在路径外，允许的值有 nonzero（默认值）：非零环绕原则，evenodd：奇偶环绕原则

默认情况下，canvas 有一个与它自身一样大的裁剪路径（也就是没有裁剪效果）
现在可以通过clip()来创建一个裁剪路劲（也就有裁剪效果了）。

  img.onload = () => {
            ctx.arc(50, 50,50, 0, 2 * Math.PI, false)
            ctx.clip()
            ctx.drawImage(img,10,10, 50,50, 0, 0, 500, 500)
        }
1
2
3
4
5

Path2D

Path2D 用来声明路径，用于裁剪不同的形状。
语法：Path2D()，它是一个构造函数，可以创建一个新的 Path2D 对象。

addPath()
添加一条新路径到对当前路径。

closePath()
使笔点返回到当前子路径的起始点。它尝试从当前点到起始点绘制一条直线。 如果图形已经是封闭的或者只有一个点，那么此函数不会做任何操作。

moveTo()
将一个新的子路径的起始点移动到 (x，y) 坐标。

lineTo()
使用直线连接子路径的终点到 x, y 坐标。

bezierCurveTo()
添加一条三次贝赛尔曲线到当前路径。 该方法需要三个点。 第一、第二个点是控制点，第三个点是结束点。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过调用 moveTo() 进行修改。

quadraticCurveTo()
添加一条二次贝赛尔曲线到当前路径。

arc()
添加一条圆弧路径。 圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。

arcTo()
根据控制点和半径添加一条圆弧路径，使用直线连接前一个点。

ellipse()
添加一条椭圆路径。椭圆的圆心在（x,y）位置，半径分别是radiusX 和 radiusY ，按照anticlockwise （默认顺时针）指定的方向，从 startAngle 开始绘制，到 endAngle 结束。

rect()
创建一条矩形路径，矩形的起点位置是 (x, y) ，尺寸为 width 和 height。

img.onload = () => {
            ctx.arc(50, 50,50, 0, 2 * Math.PI, false)
            const path1 = new Path2D()
            path1.rect(0, 0, 20, 20)
            ctx.clip(path1)
            ctx.drawImage(img,10,10, 50,50, 0, 0, 500, 500)
        }
1
2
3
4
5
6
7