canvas常用的几种重叠绘图设置globalCompositeOperation

最新推荐文章于 2024-11-16 21:44:34 发布

1024小神

最新推荐文章于 2024-11-16 21:44:34 发布

阅读量935

点赞数

分类专栏： HTML前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_44786530/article/details/133975003

版权

HTML前端专栏收录该内容

728 篇文章

订阅专栏

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显示的效果：