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

短命女 2024-02-21 10:38 23阅读 0赞

`globalCompositeOperation`描述了2个图形交叉的时候是什么样子，它的值有很多，这里就盗一张很经典的图：![ba7e1aa045844f5c8b2d1c1e5c1fec7d.png][]

我们来看一个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显示的效果：![85603e008b054cbb91e2ba6683eb5ae8.png][]

设置了source-in的效果:![5fb9dc5752de475ba94314e6c5dcb2b0.png][]

[ba7e1aa045844f5c8b2d1c1e5c1fec7d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/3b39113e023b4301b8015b4d9e6462de.png
[85603e008b054cbb91e2ba6683eb5ae8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/3b88c2092029498983aadd9176941665.png
[5fb9dc5752de475ba94314e6c5dcb2b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/060ba21bb961487a9f541e1b81f772ac.png

发表评论取消回复

表情：

评论列表（有 0 条评论，23人围观）

还没有评论，来说两句吧...

相关阅读

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

`globalCompositeOperation`描述了2个图形交叉的时候是什么样子，它的值有很多，这里就盗一张很经典的图：![ba7e1aa045844f5c8b2d1c1

短命女/ 2024年02月21日 10:38/ 0 赞/ 24 阅读

相关几种常用的数据库端口

1433　　sqlserver 1521　　oracle 1527　　Derby 3306　　mysql 5432　　pgsql 5000　　db2 909

野性酷女/ 2023年08月17日 17:32/ 0 赞/ 124 阅读

相关动画效果之 Canvas学习-globalCompositeOperation详解

本节介绍一下globalCompositeOperation，以的形式说明每个属性。 globalCompositeOperation与cilp（）的区别： globa

忘是亡心i/ 2023年06月08日 06:43/ 0 赞/ 180 阅读

相关 Java swing几种常用的样式设置

// Metal风格 (默认) String lookAndFeel = "javax.swing.plaf.metal.MetalLookAn

雨点打透心脏的1/2处/ 2022年12月21日 14:55/ 0 赞/ 162 阅读

相关几种常用的算法简介

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 1、穷举法穷举法是最基本的算法设计策略，其思想是

系统管理员/ 2022年10月02日 04:48/ 0 赞/ 196 阅读

相关 ajax常用的几种写法

1、 $.ajax({ url:"servlet", type:"post",//get

ゝ一纸荒年。/ 2022年10月01日 00:59/ 0 赞/ 320 阅读

相关 Android 绘图(二) Canvas

上篇文章，我们讲述了Paint(画笔)类的。如果你还未了解，那么可以先看看这篇文章，[ Android 绘图(一) Paint][Android _ Paint]。今天这

比眉伴天荒/ 2022年07月21日 11:28/ 0 赞/ 261 阅读

相关 JS_绘图_canvas

一、绘图的必要步骤 1. 创建画布（纸） ①、需要在body中添加canvas同时初始化画布的大小如： < canvas id= "can" widt

妖狐艹你老母/ 2022年06月10日 06:16/ 0 赞/ 244 阅读

相关 Canvas绘图--放缩

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

港控/mmm°/ 2022年05月28日 12:20/ 0 赞/ 304 阅读

相关 Canvas绘图

Canvas绘图 Canvas简介 Canvas是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使

爱被打了一巴掌/ 2022年03月15日 01:44/ 0 赞/ 372 阅读