canvas擦除多边形，利用globalCompositeOperation

于 2022-08-25 17:00:02 发布
阅读量531 收藏
点赞数 1
分类专栏： canvas 文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51389137/article/details/126528412
版权

 canvas擦除多边形，利用globalCompositeOperation 
1.画出之前应有的区域（大）
利用     ctx.globalCompositeOperation="destination-out";
2.画出擦除后需要保留的区域，填充颜色用rgba 透明度设置为1
ctx.globalCompositeOperation="source-over";
3.再次画擦除后需要保留区域，颜色为需要展示的颜色
由于globalCompositeOperation操作已经把外层（第一次展示，需要画的图形与擦除后图像交集剪切，所以展示图像颜色不受其影响

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
    #myCanvas{
        margin-left: 500px;
    }
</style>
</head>
<body>

<canvas id="myCanvas" width="300" height="350" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="rgba(0, 225, 0,1)";
ctx.fillRect(20,20,75,50);
	ctx.globalCompositeOperation="destination-out";
    ctx.fillStyle="rgba(255,255, 255,1)";	
ctx.fillRect(30,30,55,30);	
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="rgba(255, 0, 0,0.5)";	
ctx.fillRect(30,30,55,30);	

ctx.globalCompositeOperation="destination-out";
    ctx.fillStyle="rgba(255,255, 255,1)";	
    ctx.globalCompositeOperation="source-over";
// ctx.fillStyle="rgba(0, 225, 0,0.5)";	
// ctx.fillRect(130,130,55,30);	
// ctx.globalCompositeOperation="destination-in";
// ctx.fillStyle="rgba(255, 0, 0,1)";
// ctx.fillRect(120,120,75,50);
</script>

</body>
</html>

例子方便用矩形复现三次画法加上  globalCompositeOperation 

贺今宵
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas绘图任意矩形、多边形
10-19
canvas鼠标拖动绘制任意矩形、多边形；在index.html页面中，根据drawType来绘制形状，矩形：drawType = 'rect'; 多边形：drawType =polygon
canvas中的合成------globalCompositeOperation
YMX2020的博客
07-03 779
canvas中的合成------globalCompositeOperation 我们知道canvas其实就是一层一层的图层，后画的图案会覆盖到前面图案的上面，通过一层一层叠加的方式呈现到我们眼前，如下图所示 <body> <canvas id='canvas' width="600" height="500"></canvas> </body> <script> const canvas = document.getElementByI
Canvas globalCompositeOperation API
weixin_34184158的博客
07-24 105
参考： http://www.cnblogs.com/jenry/archive/2012/02/11/2347012.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;globalComposi
canvas globalCompositeOperation
Wanan
06-21 1112
globalCompositeOperation 可以在已有图形后面再画新图形，还可以用来遮盖，清除（比 clearRect 方法强劲得多）某些区域。 使用：globalCompositeOperation = type; 效果图如下： 不知为什么，source-in、source-atop 效果没出来 不知为什么，destination-in、destination-out 效果没出来
Canvas globalCompositeOperation
weixin_34099526的博客
12-21 171
在默认情况之下，如果在Canvas之中将某个物体（源）绘制在另一个物体（目标）之上，那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面。简单点讲，在Canvas中，把图像源和目标图像，通过Canvas中的 globalCompositeOperation 操作，可以得到不同的效果，比如下图：正如上图，红苹果和黑色的圆，通过 globalCompositeOperation 的 destina...
在canvas中利用globalCompositeOperation属性
qq_43709198的博客
08-10 720
在canvas中利用globalCompositeOperation属性可以对同一个画布中的两个图形进行不同的合成效果，这里我运用xor来实现在矩形中挖去一个圆形。 先上图： 实现代码： var c = document.getElementById("mycanvas"); var ctx = c.getContext('2d'); ctx.fillStyle = "blue"; ctx.fillRect(0, 0, 400, 200);//矩形 ctx.globalCompositeOperati
canvas绘制多边形
08-31
总结来说，利用HTML5的`canvas`元素绘制多边形，主要涉及到以下知识点： 1. 获取`canvas`元素的2D渲染上下文。 2. 使用`save`、`restore`来保存和恢复绘图状态。 3. 设置填充色、描边颜色和线宽。 4. 计算每条边的...
js canvas实现擦除动画
10-21
1. 使用Canvas的`globalCompositeOperation`属性，设置为`destination-out`来实现擦除效果。 2. 绘制圆形或线条，并填充为透明，以模拟擦除动作。 3. 利用`requestAnimationFrame`创建动画，逐帧更新擦除状态。 4. ...
学习 canvas 的 globalCompositeOperation 做出的神奇效果
weixin_34290631的博客
08-30 597
说明 最早知道 canvas 的 globalCompositeOperation 属性，是在需要实现一个刮刮卡效果的时候，当时也就是网上找到刮刮卡的效果赶紧完成任务就完了，这次又学习一次，希望能加深理解吧。 先来看下 canvas 的 globalCompositeOperation属性，具体是干什么的。 定义 globalCompositeOperation 属性设置或返回如何将一个源（新...
canvas基础——绘制简单的图形
weixin_34347651的博客
11-26 170
绘制直线： HTML部分： 1 <canvas id="myCanvas" style="border:1px solid #000;" width="200px" height="100px"></canvas> JS部分： 1 window.onload = function(){ 2 var c = document.getElement...
使用canvas实现擦除效果
weixin_30485799的博客
04-19 384
w3c关于canvas的定义： HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 html代码: <div class="container"> ...
Canvas学习：globalCompositeOperation详解
weixin_33921089的博客
12-17 230
2019独角兽企业重金招聘Python工程师标准>>> ...
Canvas的globalCompositeOperation属性详解和小练习&&实现放大镜
热门推荐
孤寒者的博客
05-19 3万+
Canvas的globalCompositeOperation属性详解和小练习&&实现放大镜
【HTML5】Canvas之globalCompositeOperation属性详解
laijieyao的专栏
12-11 2万+
HTML5 Canvas globalCompositeOperation属性详解
canvas中globalCompositeOperation属性值所代表的的值表达含义及样式
qq_1307495的博客
03-15 1308
CANVAS属性记录  一：globalCompositeOperation的属性 CanvasRenderingContext2D.globalCompositeOperation Canvas 2D API的 属性设置在绘制新形状时要应用的合成操作的类型。 1.1 Type类型 1.2 source-over 这是默认设置，并在现有画布内容的顶部绘制新形状 1.3 source-in 新图形仅在新图形和目标画布重叠的位置绘制。其他一切都是透明的。 const canvas = this.$re
动画效果之 Canvas学习-globalCompositeOperation详解
咖啡味的小认真
10-17 3336
本节介绍一下globalCompositeOperation，以的形式说明每个属性。 globalCompositeOperation与cilp（）的区别： globalCompositeOperation用于控制源图像在目标图像上的显示方式。 源图像: 指你准备绘制到画布上的图像 目标图像：在画布上已经绘制的图像 clip() 方法从原始画布中剪切任意形状和尺寸。 提示：一旦剪切了某个区域...
python tkinter Canvas 绘制多边形
最新发布
04-24
好的，关于python tkinter Canvas 绘制多边形，您可以使用Canvas组件提供的create_polygon方法来绘制多边形。具体实现过程可以参考以下代码： ```python from tkinter import * root = Tk() canvas = Canvas(root, bg='white', width=400, height=400) canvas.pack() points = [50, 50, 150, 50, 100, 150, 50, 150, 10, 100] canvas.create_polygon(points, outline='black', fill='red', width=3) root.mainloop() ``` 上述代码中，我们首先创建了一个Canvas组件，并且指定了它的背景色、大小等属性。接着，我们定义了一个包含多边形各个点坐标的列表points，并且使用create_polygon方法将这些点连成一个多边形。通过设置outline、fill、width等参数，我们可以给多边形设置线条颜色、填充颜色和线宽等属性。 希望对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值