首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何裁剪/使用globalCompositeOperation = "desination-out“从我的画布中排除2个圆?

使用globalCompositeOperation = "destination-out"可以从画布中排除两个圆。

globalCompositeOperation是HTML5 Canvas中的一个属性,用于设置绘图上下文中的合成操作。它可以控制新绘制的图形如何与已有的图形进行合成。

当设置globalCompositeOperation为"destination-out"时,新绘制的图形将会从已有的图形中排除。具体操作如下:

  1. 创建一个画布和绘图上下文:var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d");
  2. 绘制两个圆:ctx.beginPath(); ctx.arc(x1, y1, radius1, 0, 2 * Math.PI); ctx.fillStyle = "red"; ctx.fill(); ctx.beginPath(); ctx.arc(x2, y2, radius2, 0, 2 * Math.PI); ctx.fillStyle = "blue"; ctx.fill();
  3. 设置globalCompositeOperation为"destination-out":ctx.globalCompositeOperation = "destination-out";
  4. 绘制一个覆盖整个画布的矩形:ctx.fillRect(0, 0, canvas.width, canvas.height);
  5. 最后,将画布添加到页面中:document.body.appendChild(canvas);

这样,两个圆的重叠部分将会被从画布中排除,只剩下两个圆的非重叠部分。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)

腾讯云云服务器(CVM)是一种可随时扩展的云计算服务,提供高性能、可靠稳定的云服务器,适用于各类应用场景。您可以根据实际需求选择不同配置的云服务器,并通过腾讯云控制台进行管理和操作。

产品介绍链接地址:https://cloud.tencent.com/product/cvm

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

canvas详细教程! ( 近1万字吐血总结)

大家好,是潘潘。 今天为大家带来已经写了很久了canvas详细教程,按照文章案例一个一个敲下来保证你可以学会绘制很多图案和动画,对入门canvas很有帮助!...沙拉查词 简单来说, 是HTML5标签,它是一个容器,可以使用JS在其中绘制图形或文字。...旋转 使用rotate(angle)方法以此时画布原点为中心,顺时针旋转angle度。...裁剪 使用clip()方法原始画布剪切任意形状和尺寸。...注意:一旦剪切了某个区域,则所有之后绘图都会被限制在被剪切区域内(不能访问画布其他区域),你也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存,并在以后任意时间对其进行恢复

2.3K10

实现Web端自定义截屏

前言 当客户在使用我们产品过程,遇到问题需要向我们反馈时,如果用纯文字形式描述,我们很难懂客户意思,要是能配上问题截图,这样我们就能很清楚知道客户问题了。...聪明开发者可能已经猜到了,这是QQ/微信截图功能,开源项目正好做到了截图功能,在做之前找了很多资料,没有发现web端有这种东西存在,于是就决定参照QQ截图自己实现一个并做成插件供大家使用。...在截图工具栏布局上,一开始想法是直接在canvas画布把这些工具画出来,这样应该更容易交互一点,但是看了相关api后,发现有点麻烦,把问题复杂化了。...琢磨了一阵后,想明白了,这块还是需要使用div进行布局,在裁剪框绘制完毕后,根据裁剪位置信息计算出截图工具栏位置,改变其位置即可。...我们来看下如何使用历史记录来解决这个问题。

2.4K30

前端canvas基础复习,canvas学习笔记,持续记录

/* * 100,100,位置开始画一个半径为100 * 向100,100,位置半径半径为10,开始渐变色 * white外层向内,渐变色到达内部圆圆边时停止 * 内部会被外层颜色自动扩散从而被填充...全局属性:globalAlpha、globalCompositeOperation。 填充、描边、剪切 不带fill、stroke方法都只会在画布上产生路径状态,不会绘制实际图像。...4.使用多层画布去画一个复杂场景 某些对象需要经常移动或更改,而其他对象则保持相对静态。在这种情况下,可能优化是使用多个元素对您项目进行分层。...键盘按下:keydown 键盘松开:keyup 3.循环事件 说起如何实现 Canvas 动画,大多数人想到都是先使用 setInterval()来定时清空画布、然后重绘图形,从而达到动画效果。...在 Canvas ,对于来说,可以采用一种高精度方法来捕获:判定鼠标与圆心之间距离。

2.3K40

实现Web端自定义截屏

前言 当客户在使用我们产品过程,遇到问题需要向我们反馈时,如果用纯文字形式描述,我们很难懂客户意思,要是能配上问题截图,这样我们就能很清楚知道客户问题了。...聪明开发者可能已经猜到了,这是QQ/微信截图功能,开源项目正好做到了截图功能,在做之前找了很多资料,没有发现web端有这种东西存在,于是就决定参照QQ截图自己实现一个并做成插件供大家使用。...运行结果视频:实现web端自定义截屏 写在前面 本文插件写法采用是Vue3compositionAPI,如果对其不了解开发者请移步另一篇文章:使用Vue3CompositionAPI来优化代码量...在截图工具栏布局上,一开始想法是直接在canvas画布把这些工具画出来,这样应该更容易交互一点,但是看了相关api后,发现有点麻烦,把问题复杂化了。...琢磨了一阵后,想明白了,这块还是需要使用div进行布局,在裁剪框绘制完毕后,根据裁剪位置信息计算出截图工具栏位置,改变其位置即可。

2.4K20

​canvas 高级功能(

canvas 高级功能() 在本文中,你将学习到 Canvas 提供一些更高级功能。本文将讲述如何合成、创建阴影使图形看起来更真实有趣。...本文内容非常精彩,希望这些内容能够拓宽你眼界,帮助你学会画布高级功能。 1. 合成 canvas 高级功能()确实包括许多内容,祝贺你学完了这些知识。...在画布绘制所有东西都是已经合成,这意味着绘制所有内容都会与已经绘制现有元素合并在一起。这实际上都是基本合成,只是将一些内容叠加到另一些内容之上。...马上要介绍这些方面的合成,但是现在我们先了解一下画布中最简单合成方法,即globalAlpha属性。 ❝注意:本节将介绍两个全局合成属性都会影响到2D渲染上下文绘图效果。...有一些操作(如 destination-out )在擦除画布上一些非矩形区域时是很有用:例如,使用作为源。 2.

79820

撩妹技能 get,教你用 canvas 画一场流星雨

上面几幅图是在 ps 上模拟,本质上 ps 也是在画布上绘画,我们马上在 canvas 上试试。 那,直接代码实现一下。...这里就要用到一个冷门属性了,globalCompositeOperation,全局组合操作? 原谅放荡不羁翻译。 这个属性其实就是用来定义后绘制图形与先绘制图形之间组合显示效果。 ...注意这里 destination-out 和 destination-in,示例这两个属性最终都只有部分源图像保留了下来,符合我们只要保留流星需求。...觉得 w3cschool 上描述不是很正确,自己理解概括一下。...destination-in :只保留了源图像(矩形)和目标图像()交集区域源图像 destination-out:只保留了源图像(矩形)减去目标图像()之后区域源图像 上述示例目标图像透明度是

89921

HTML5 Canvas开发详解(4) -- 其他基础操作

,r1表示渐变开始半径 //x2、y2表示渐变结束圆心坐标,r2表示渐变结束半径 let gnt = cxt.createRadialGradient(x1, y1, r1, x2, y2,...在Canvas,我们可以使用save()方法来保存当前状态,然后可以使用restore()方法来恢复之前保存状态。...3.2 clip()方法 在Canvas,可以使用clip()方法结合基本图形绘制来指定一个剪切区域。...语法: //type:表示输出MIME类型,如果省略,将使用image/png类型 cnv.toDataURL(type); 使用toDataURL()方法可以将画布转换为data URL,data...语法: cxt.globalCompositeOperation = 属性值; 属性取值: globalCompositeOperation属性定义是整个画布全局叠加效果,也就是说,如果一个画布中有多个图形叠加

61820

canvas绘图基本使用方法(三)

globalCompositeOperation: 设置或返回新图像如何绘制到已有的图像上,该方法有以下属性值: 值 描述 source-over 在目标图像上显示源图像(默认) source-atop...目标图像位于源图像之外部分是不可见 destination-in 在源图像显示目标图像。...剪辑区域: clip()方法原始画布剪切任意形状和尺寸。 提示:一旦剪切了某个区域,则所有之后绘图都会被限制在被剪切区域内(不能访问画布其他区域)。...您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存,并在以后任意时间对其进行恢复(通过 restore() 方法) 以下是用一个去截取一个矩形示例: ?...除了上述属性和方法,还有以下等方法: drawImage(): 向画布上绘制图像、画布或视频。

97230

Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布(下)

icon 使用用于标记图标的字体。 menu 使用用于菜单字体(下拉列表和菜单列表)。 caption 使用标题控件字体(比如按钮、下拉列表等)。...status-bar 使用用于窗口状态栏字体。 message-box 使用用于对话框字体。 small-caption 使用用于标记小型控件字体。...img 规定要使用图像、画布或视频。...x 在画布上放置图像 x 坐标位置。 y 在画布上放置图像 y 坐标位置。 w 要使用图像宽度。(伸展或缩小图像) h 要使用图像高度。...设置或返回如何将一个源(新)图像绘制到目标(已有)图像上 裁切 clip() 原始画布剪切任意形状和尺寸 案例 画布剪切 200*120 像素矩形区域。

1.3K70

邀你看一场浪漫烟火 -- canvas放烟花

漫天烟火送给遥远你 ?裁一段星河送给你,好叫你不逊色这漫天烟火 ? 漫天烟火,在这璀璨星空中闪耀,成就了这片星空绚丽,更散发出了自己无限光芒,今天就使用canvas来做一个烟花效果吧!...创建 canvas画布 在js先获取标签,设置画布大小,采用resize监听页面的调整,及时改变画布大小 // 元素获取 const canvas = document.querySelector...实现烟花散开 有了上面的铺垫,每一个小圆点都是即将要散开烟花,那么我们只需要更新画布让它半径不断增大即可,实现散开效果很简单,那部分代码就不贴了(节省篇幅),对于更新画布,采用一个html5新方法...在隐藏或不可见元素,requestAnimationFrame将不会进行重绘或回流,会减少对内存使用 requestAnimationFrame 会把每一帧所有DOM操作集中起来,在一次重绘或回流中就完成...,同时每个粒子移动半径不断地减小,这样会形成向中间合拢趋势,由于每个粒子都存放在数组当中,当粒子透明度小于0,数组移除 8.

2.1K50

Canvas学习笔记,记录使用过程遇到一些问题

2022-11-07 1.反向绘制 fill(),方法用于填充已有的闭合路径,假设有一个如下图路径,默认情况下和方形都会被填充,最后效果就是一个黑色方形; demo 通过fillRule参数...允许值: "nonzero": 非零环绕规则,默认规则。 "evenodd": 奇偶环绕规则。 将填充规则设置为evenodd,绘制结果会变为下面这样,通过这种方式可以实现反向裁剪。...设备像素比,它计算方式是 物理像素 / 屏幕宽度像素; 首先设置canvas宽度和高度是原来2倍 使用ctx.scale(2,2)设置绘制东西也放大2倍 在canvas父元素上使用缩放,使用...提示 canvas 绘图时,会两个物理像素中间位置开始绘制并向两边扩散 0.5 个物理像素。...函数可以OffscreenCanvas对象绘制内容创建一个ImageBitmap对象。

88921

Canvas类最全面详解 - 自定义View应用系列

、思路不清晰、简单问题复杂化等等 今天,将全面总结自定义ViewCanvas类使用能保证这是市面上最全面、最清晰、最易懂 文章较长,建议收藏等充足时间再进行阅读 阅读本文前请先阅读...绘制 原理:圆心坐标+半径决定 具体使用 // 参数说明: // 1、2:圆心坐标 // 3:半径 // 4:画笔 // 绘制一个圆心坐标在(500,500),半径为400 。...示例可以发现: 不使用中心点:圆弧形状 = (起、止点连线+圆弧)构成面积 使用中心店:圆弧面积 = (起点、圆心连线 + 止点、圆心连线+圆弧)构成面积 类似扇形 4.2.3...); 下面将用一个实例去表示如何使用: - 实例介绍 将坐标系移动到(450,650);绘制一个,将上述Canvas操作录制下来,并在某个时刻重新绘制出来。...,当这些区域有重叠时候,这个参数决定重叠部分该如何处理,多次裁剪之后究竟获得了哪个区域,有以下几种参数: ?

2.9K81

Carson带你学Android:自定义View Canvas类使用教程

、思路不清晰、简单问题复杂化等等 今天,将全面总结自定义ViewCanvas类使用能保证这是市面上最全面、最清晰、最易懂 目录 1....绘制 原理:圆心坐标+半径决定 具体使用 // 参数说明: // 1、2:圆心坐标 // 3:半径 // 4:画笔 // 绘制一个圆心坐标在(500,500),半径为400 。...); 下面将用一个实例去表示如何使用: 实例介绍 将坐标系移动到(450,650);绘制一个,将上述Canvas操作录制下来,并在某个时刻重新绘制出来。...,当这些区域有重叠时候,这个参数决定重叠部分该如何处理,多次裁剪之后究竟获得了哪个区域,有以下几种参数: 以三个参数为例讲解: Region.Op.DIFFERENCE:显示第一次裁剪与第二次裁剪不重叠区域...保存某个图层状态(saveLayer) 作用:新建一个图层,并放入特定 具体使用 使用起来非常复杂,因为图层之间叠加会导致计算量成倍增长,营尽量避免使用

2.2K10

利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果

image.png 可以看到中间线路里轨道效果是非常炫酷,那么本文主要内容就是讲解如何在canvas上绘制出这种效果。...分析设计稿 先看看设计稿轨道效果 c4f2c4e2a06f40aea5a0b15022c94ae2_tplv-k3u1fbpfcp-zoom-1.jpg 程序员解决问题时经常喜欢用到方法是把一个大问题拆解为若干个小问题然后逐一处理...根据设计稿我们可以看到这个线路实际上是由 外层空心线+发光效果+内层斑马线+倒影 组成,所以我们要做就是如何处理这几个小问题。...canvas上,再将离屏canvas绘制到页面的画布 var tempCanvas = document.createElement("canvas"); tempCanvas.width = 800...CanvasRenderingContext2D.setLineDash() 离屏canvas技巧 可以看到想要达到好效果还是不容易,需要我们灵活配合使用多种绘制技巧,希望这篇文章能对大家有所帮助

55820

第157天:canvas基础知识详解

2.6.2 在画布上绘制图像,并规定图像宽度和高度 2.6.3 图片裁剪,并在画布上定位被剪切部分 2.6.4 用JavaScript创建img对象 2.6.5 面向对象基础复习补充:...'redɪəl] 参数详解: x0: 渐变开始 x 坐标 y0: 渐变开始 y 坐标 r0: 开始半径 x1: 渐变结束 x 坐标 y1: 渐变结束 y 坐标 r1: 结束半径...ctx.save() 保存当前环境状态 可以把当前绘制环境进行保存到缓存。 ctx.restore() 返回之前保存过路径状态和属性 获取最近缓存ctx 一般配合位移画布使用。...3.5 画布限定区域绘制(了解) ctx.clip(); 方法原始画布剪切任意形状和尺寸 一旦剪切了某个区域,则所有之后绘图都会被限制在被剪切区域内(不能访问画布其他区域) 一般配合绘制环境保存和还原...然后运行 transform() transform() 替换绘图的当前转换矩阵 globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上 像素操作 四、 Canvas开发库封装

5K21

Canvas 烟花合集 -- 将粉丝头像做成烟花在天空绽放✨

对着烟花许愿,希望你永远在身边” ? “凑不够满天星辰那就去看看烟花吧,人间烟火气,最抚凡人心” ?小tips:喜欢可以关注博主私信代码噢~ ⚡也可以看看前面两篇烟花噢 ?...将图片绘制在画布上 首先我们需要将需要制作成烟花图片绘制在画布上 特别注意: 由于这种图片是用来取色用底图所以我们并不希望这张图片被用户看到,因此我们可以将这张图片渲染在新画布上,烟花渲染在不同画布上...,这样上面画布就可以盖住下面的画布,这张底图也不会被看见 由于图片加载需要一定时间,所以我们对图片操作代码需要写在回调函数里面,不然图片可能会未加载而报错 let img1 = new Image...获取像素点信息 这一步目的是获取到图片每个像素颜色,这样我们就可以通过这些像素点合成一张图片,也可以排除掉一些像素点,筛出想要图形 let imgData = inCtx.getImageData...(0, 0, imgWidth, imgHeight) 在前面的代码我们在 (0,0) 位置绘制了图片,我们通过getImageData将这块区域像素信息取出来,返回结果是包含像素点信息对象,类似于下图

1.2K20
领券