《JS原理、方法与实践》- canvas作图（二）- 组合、剪切、坐标检测
组合与剪切
组合与剪切主要是对应多个图形来说的，组合指的是多个图形重叠时的组合方式，剪切是指使用路径来指定绘图的区域，相似于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>
运行结果
假如我的博客对你有帮助、假如你喜欢我的博客内容，请 “点赞” “评论” “收藏” 一键三连哦！
听说 ? 点赞 ? 的人运气不会太差，每一天都会元气满满哦 嘿嘿!!! ❤️ ❤️ ❤️
大家的支持就是我坚持下去的动力。点赞后不要忘了? 关注 ?我哦！
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 《JS原理、方法与实践》- canvas作图（二）- 组合、剪切、坐标检测
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 《JS原理、方法与实践》- canvas作图（二）- 组合、剪切、坐标检测
