几种重叠绘图设置globalCompositeOperation"/>
canvas常用的几种重叠绘图设置globalCompositeOperation
globalCompositeOperation描述了2个图形交叉的时候是什么样子，它的值有很多，这里就盗一张很经典的图：
我们来看一个source-in的例子吧：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div>合成图层:只展示哪部分内容，是交际还是补</div><canvas id="myCanvas" width="600" height="600"></canvas><script>// 获取画布var canvas = document.getElementById('myCanvas')// 获取画布的上下文var ctx = canvas.getContext('2d')// 绘制矩形ctx.fillStyle = 'red'ctx.fillRect(100, 100, 200, 200)// 设置只绘制交际部分ctx.globalCompositeOperation = 'source-in'// 绘制矩形ctx.fillStyle = 'blue'ctx.fillRect(200, 200, 200, 200)</script></body>
</html>
如果没有source-in显示的效果：
设置了source-in的效果:
更多推荐
canvas常用的几种重叠绘图设置globalCompositeOperation
发布评论