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)
}
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)
}