《JS原理、方法与实践》- canvas作图（二）- 组合、剪切
2020-10-12 本文已影响0人
张中华
组合与剪切
组合与剪切主要是对应多个图形来说的，组合指的是多个图形重叠时的组合方式，剪切是指使用路径来指定绘图的区域，类似于Photoshop中的蒙版的效果。
组合
图形的组合是通过globalCompositeOperation属性来操作的，该属性可以取下面的值：
- source-over: 后绘制的图形覆盖原图，该值为默认值
- source-in: 保留后绘制图形和原图形重叠的部分，使用后绘制图形的样式，其他区域透明，也就是保留相交的部分
- source-out: 保留后绘制图形不和原图形重叠的部分，其他区域透明
- source-atop: 保留后绘制图形和原图形重叠的部分，使用后绘制图形的样式，原图中的非重叠部分不变
- destination-over: 后绘制图形被原图覆盖，也就是重叠部分显示原图
- destination-in: 保留后绘制图形和原图形重叠的部分，使用原图的样式，其他区域透明
- destination-out: 保留原图不和后绘制图形重叠的部分，其他区域透明
- destination-atop: 保留后绘制图形和原图形重叠的部分，使用原图的样式，后绘制图形中的非重叠部分不变
- lighter: 后绘制图形和原图重叠的部分进行叠加
- copy: 显示后绘制图形，不显示原图
- xor: 后绘制图形和原图重叠的部分进行异或操作
- multiply: 将后绘制图形和原图的像素相乘，图形变暗
- screen: 将后绘制图形和原图的像素分别反向后相乘再反向，图形变亮
- overlay: 组合使用multiply和screen,使亮的部分更亮，暗的部分更暗
- darken: 取两个图形中较暗的像素值，例如，#aa0011与#cc3300计算后为#aa0000
- ighten: 取两个图形中较亮的像素值，例如，#aa0011与#cc3300计算后为#aa3311
- color-dodge: 使用原图像素除以后绘制图形的反向像素值
- color-burn: 使用原图反向像素除以后绘制图形的像素，然后再反向
- hard-light: 组合使用multiply和screen，它与overlay的区别是将原图和后绘制图形进行交换
- soft-light: 类似于hard-light，但比hard-light柔和
- difference: 使用后绘制图形的像素值减去原图的像素值
- exclusion: difference操作后降低对比度
- hue: 使用后绘制图形的色调和原图的亮度、色度
- saturation: 使用后绘制图形的色度和原图的亮度、色调
- color: 使用后绘制图形的色度、色调和原图的亮度
- luminosity：使用后绘制图形的亮度和原图的色度、色调
示例：
<body>
<canvas id='c2d'>浏览器不支持canvas</canvas>
<script>
const canvas = document.getElementById('c2d');
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(30,60,60,40);
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = 'blue';
ctx.fillRect(70,40,60,40);
}
</script>
</body>
运行结果
剪切
剪切的作用其实是指定新的绘图区域，如果将图像绘制到剪切区域外面就显示不出来了，但是剪切操作不会影响剪切之前的图形。剪切使用的是clip方法，如下：
- clip([fillRule="nonzero"])
- clip(path[,fillRule="nonzero"])
fillRule:用来指定用你什么算法来判断一个点是否在被剪切的区域内，可取“nonzero”或“evenodd”
当路径是使用beginPath创建时，使用第一种方式直接调用clip，当路径是使用Path2D创建时，需要使用第二种方式将创建的路径作为参数传入。
示例：
<body>
<canvas id='c2d'>浏览器不支持canvas</canvas>
<script>
const canvas = document.getElementById('c2d');
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
ctx.fillRect(110,15,30,45);
ctx.beginPath();
ctx.arc(60,60,45,0,2*Math.PI);
ctx.stroke();
ctx.clip();
ctx.fillRect(0,0,60,60);
}
</script>
</body>
运行结果
首先画一个以（110,15）为左上顶点，宽为30、高为45的矩形，接着剪切了一个（60，60）为圆形、45为半径的圆，然后又画了一个以（0，0）为左上角，宽和高都是60的矩形。这时第一个矩形可以正常显示，但是第二个矩形只有剪切区域中的部分（也就是和剪切区域相交的部分）才可以显示出来。
坐标检测
坐标检测就是检测指定的点是否在所画的路径中，可以用于动画和游戏的碰撞检测中。坐标检测使用的是isPointInPath方法，方法如下：
- isPointInPath(x,y[,fillRule="nonzero"])
- isPointInPath(path,x,y[,fillRule="nonzero"])
参数中，fillRule也用于指定算法，一般不需要修改；x和y为要检测点的坐标；path为使用Path2D新建出来的路径，如果是beginPath新建的路径，就可以直接调用。
示例：
<body>
<canvas id='c2d'>浏览器不支持canvas</canvas>
<div></div>
<script>
const canvas = document.getElementById('c2d');
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
const newPath = new Path2D();
newPath.rect(30,30,40,60);
const div = document.querySelector('div');
const spanValue = `<span>30,40 is in Path: ${ctx.isPointInPath(newPath,30,40)}</span>`;
const spanValue1 = `<span>20,40 is in Path: ${ctx.isPointInPath(newPath,20,40)}</span>`;
div.innerHTML = spanValue + '<br>' + spanValue1;
}
</script>
</body>
运行结果
如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “评论” “收藏” 一键三连哦！
听说 👉 点赞 👈 的人运气不会太差，每一天都会元气满满哦 嘿嘿!!! ❤️ ❤️ ❤️
大家的支持就是我坚持下去的动力。点赞后不要忘了👉 关注 👈我哦！
