- 综合排序
- 最热优先
- 最新优先
- 来自专栏FEWY
学习 canvas 的 globalCompositeOperation 做出的神奇效果
说明 最早知道 canvas 的 globalCompositeOperation 属性，是在需要实现一个刮刮卡效果的时候，当时也就是网上找到刮刮卡的效果赶紧完成任务就完了，这次又学习一次， 先来看下 canvas 的 globalCompositeOperation属性，具体是干什么的。 定义 globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。 源图像 = 您打算放置到画布上的绘图。 用法 默认值： source-over 语法： context.globalCompositeOperation="source-in"; 表格中的蓝色矩形为目标图像，红色圆形为源图像。 实现思路 在一个 canvas 上先画出黑白色的图片，然后设置背景是一张彩色的图片，鼠标点击时，设置 canvas 的 globalCompositeOperation 属性值为 destination-out
1.9K20发布于 2019-05-26 - 来自专栏hightopo
HT for Web基于HTML5的图像操作（二）
这次我们依然基于HTML5技术，但采用Canvas的globalCompositeOperation属性进行各种blending效果： ? 各种globalCompositeOperation效果可参考https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing 3、最后一步采用“destination-atop”的globalCompositeOperation方式，再次drawImage，这次绘制效果将会抠出图片像素区域，剔除非图片部分，最终达到我们所要的染色效果图片 = "multiply"; context.drawImage(image, 0, 0, width, height); context.globalCompositeOperation = 造成这种巨大差距的根本原因在于createColorImage1的方式完全基于CPU运算，js本就单线程，且密集数值运算也不是js的强项，而采用globalCompositeOperation的渲染方式
90920发布于 2018-07-09 - 来自专栏计算机图形学 前端可视化 WebGL
canvas可视化效果之内阴影效果
如何绘制内阴影效果 要实现上面的内阴影效果，首先还是使用shadowBlur参数，然后把ctx的globalCompositeOperation参数设置为“source-out” 即可。 试试如下代码： ctx.globalCompositeOperation = 'source-out'; ctx.beginPath(); ctx.beginPath(); 代码如下： ctx.globalCompositeOperation = 'xor'; ctx.beginPath(); ctx.beginPath(); ctx.moveTo 比如把上述代码中的shadowColor改成blue，只有外阴影的颜色改变了： ctx.globalCompositeOperation = 'xor'; ctx.beginPath(); CanvasRenderingContext2D.shadowBlur 其中globalCompositeOperation是一个有意思的属性，通过设置不同的参数，可以实现很多不同的效果。
1.3K40发布于 2020-12-31 - 来自专栏用户4773577的专栏
鸿蒙Next画布Canvas基础使用演示
Column({space:10}){ Button('现有绘制内容上显示新绘制内容').onClick(()=>{ this.context.globalCompositeOperation () }) Button('现有绘制内容顶部显示新绘制内容').onClick(()=>{ this.context.globalCompositeOperation () }) Button('现有绘制内容之外显示新绘制内容').onClick(()=>{ this.context.globalCompositeOperation () }) Button('新绘制内容顶部显示现有绘制内容').onClick(()=>{ this.context.globalCompositeOperation () }) Button('copy 显示新绘制内容而忽略现有绘制内容').onClick(()=>{ this.context.globalCompositeOperation
28910编辑于 2025-06-28 - 来自专栏huofo's blog
利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果
实现效果 绘制空心线与发光效果 绘制空心线时我们需要利用到[CanvasRenderingContext2D.globalCompositeOperation](https://developer.mozilla.org /zh-CN/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation)这个属性，详细原理可以查看canvas 绘制双线技巧，本文不再做赘述 了解实现原理之后动手就很容易了，简述思路就是: 通过ctx.globalCompositeOperation = "destination-out"绘制空心线，再利用canvas的阴影配置来模拟发光的效果 ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.shadowBlur = shadowBlur; ctx.stroke(); ctx.globalCompositeOperation "destination-out"; ctx.lineWidth -= borderWidth; ctx.strokeStyle = color; ctx.stroke(); ctx.globalCompositeOperation
87220编辑于 2022-03-17 - 来自专栏计算机图形学 前端可视化 WebGL
利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果
实现效果 绘制空心线与发光效果 绘制空心线时我们需要利用到[CanvasRenderingContext2D.globalCompositeOperation](https://developer.mozilla.org /zh-CN/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation)这个属性，详细原理可以查看canvas 绘制双线技巧，本文不再做赘述 了解实现原理之后动手就很容易了，简述思路就是: 通过ctx.globalCompositeOperation = "destination-out"绘制空心线，再利用canvas的阴影配置来模拟发光的效果 ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.shadowBlur = shadowBlur; ctx.stroke(); ctx.globalCompositeOperation "destination-out"; ctx.lineWidth -= borderWidth; ctx.strokeStyle = color; ctx.stroke(); ctx.globalCompositeOperation
1.1K20发布于 2020-12-31 - 来自专栏计算机图形学 前端可视化 WebGL
canvas绘制图像轮廓效果绘制边框绘制轮廓 使用算法（marching-squares-algorithm）总结参考文档
然后开启globalCompositeOperation = 'source-in', 并用纯色填充整个canvas区域，由于source-in的效果，纯色会填充放大图片有像素的区域。 使用默认的globalCompositeOperation（source-over），用原始尺寸绘制图片。 代码如下所示： // fill with color ctx.globalCompositeOperation = "source-in"; ctx.fillStyle , w, h); 首先恢复globalCompositeOperation为默认值 "source-over"，然后按照原本的大小绘制图片。 只显示轮廓 如果我们只想得到图片的轮廓，则可以在最后绘制的时候，globalCompositeOperation 设置为“destination-out”，代码如下： ctx.globalCompositeOperation
3.2K30发布于 2021-04-02 - 来自专栏HT
HT for Web基于HTML5的图像操作（二）
这次我们依然基于HTML5技术，但采用Canvas的globalCompositeOperation属性进行各种blending效果： ? 各种globalCompositeOperation效果可参考https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing 3、最后一步采用“destination-atop”的globalCompositeOperation方式，再次drawImage，这次绘制效果将会抠出图片像素区域，剔除非图片部分，最终达到我们所要的染色效果图片 = "multiply"; context.drawImage(image, 0, 0, width, height); context.globalCompositeOperation 造成这种巨大差距的根本原因在于createColorImage1的方式完全基于CPU运算，js本就单线程，且密集数值运算也不是js的强项，而采用globalCompositeOperation的渲染方式
1.6K80发布于 2018-01-03 - 来自专栏计算机图形学 前端可视化 WebGL
利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果
实现效果 绘制空心线与发光效果 绘制空心线时我们需要利用到[CanvasRenderingContext2D.globalCompositeOperation](https://developer.mozilla.org /zh-CN/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation)这个属性，详细原理可以查看canvas 绘制双线技巧，本文不再做赘述 了解实现原理之后动手就很容易了，简述思路就是: 通过ctx.globalCompositeOperation = "destination-out"绘制空心线，再利用canvas的阴影配置来模拟发光的效果 ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.shadowBlur = shadowBlur; ctx.stroke(); ctx.globalCompositeOperation "destination-out"; ctx.lineWidth -= borderWidth; ctx.strokeStyle = color; ctx.stroke(); ctx.globalCompositeOperation
84100发布于 2020-12-05 - 来自专栏计算机图形学 前端可视化 WebGL
canvas可视化效果之内阴影效果
如何绘制内阴影效果 要实现上面的内阴影效果，首先还是使用shadowBlur参数，然后把ctx的globalCompositeOperation参数设置为“source-out” 即可。 试试如下代码： ctx.globalCompositeOperation = 'source-out'; ctx.beginPath(); ctx.beginPath(); 代码如下： ctx.globalCompositeOperation = 'xor'; ctx.beginPath(); ctx.beginPath(); ctx.moveTo 比如把上述代码中的shadowColor改成blue，只有外阴影的颜色改变了： ctx.globalCompositeOperation = 'xor'; ctx.beginPath(); CanvasRenderingContext2D.shadowBlur 其中globalCompositeOperation是一个有意思的属性，通过设置不同的参数，可以实现很多不同的效果。
1.6K10发布于 2020-12-22 - 来自专栏计算机图形学 前端可视化 WebGL
FireFox下Canvas使用图像合成绘制SVG的Bug
于是我把之前写好的两种算法发给了小伙伴，让他参照实现，第一种算法是操纵像素、第二种使用了图像合成：globalCompositeOperation。 所有的事情都可能会有意外，写程序更是如此了。 结论已经明显： FireFox浏览器下，用Canvas下绘制绘制SVG图的时候，globalCompositeOperation的设置将不生效。 下面是一段用于测试的代码，ctx.globalCompositeOperation = 'destination-out' 表示用源图像的形状去挖空目标图像。 function () { ctx.drawImage(img, 0, 0, img.width * 2, img.height * 2); ctx.globalCompositeOperation function () { ctx.drawImage(img, 0, 0, img.width * 2, img.height * 2); ctx.globalCompositeOperation
1.6K00发布于 2019-07-10 - 来自专栏计算机图形学 前端可视化 WebGL
canvas 绘制双线技巧
并且灵感乍现，想到了一个解决方法，就是使用ctx.globalCompositeOperation。 /ta... globalCompositeOperation的定义和用法 globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。 目标图像 = 您已经放置在画布上的绘图 下图显示了globalCompositeOperation的不同的值的解释： ? 之后设置globalCompositeOperation为 'destination-out'，调整线宽为4，调用stroke方法绘制一条线宽为4的路线B。 其中的答案也是采用了globalCompositeOperation设置为destination-out的方式。 欢迎关注公众号“ITman彪叔”。
2.8K50发布于 2019-05-29 - 来自专栏计算机图形学 前端可视化 WebGL
FireFox下Canvas使用图像合成绘制SVG的Bug
于是我把之前写好的两种算法发给了小伙伴，让他参照实现，第一种算法是操纵像素、第二种使用了图像合成：globalCompositeOperation。 所有的事情都可能会有意外，写程序更是如此了。 结论已经明显： FireFox浏览器下，用Canvas下绘制绘制SVG图的时候，globalCompositeOperation的设置将不生效。 下面是一段用于测试的代码，ctx.globalCompositeOperation = 'destination-out' 表示用源图像的形状去挖空目标图像。 function () { ctx.drawImage(img, 0, 0, img.width * 2, img.height * 2); ctx.globalCompositeOperation function () { ctx.drawImage(img, 0, 0, img.width * 2, img.height * 2); ctx.globalCompositeOperation
1.4K10发布于 2019-07-12 - 来自专栏学编程的GISer
canvas详细教程! ( 近1万字吐血总结)
'2d'); ctx.arc(350, 200, 200, 0, [(Math.PI) / 180] * 360) ctx.fillStyle = 'skyblue' ctx.globalCompositeOperation ) // 第三个粉色圆： ctx.beginPath() ctx.arc(500, 400, 200, 0, [(Math.PI) / 180] * 360) ctx.globalCompositeOperation ) // 第三个粉色圆： ctx.beginPath() ctx.arc(500, 400, 200, 0, [(Math.PI) / 180] * 360) ctx.globalCompositeOperation ) // 第三个粉色圆： ctx.beginPath() ctx.arc(500, 400, 200, 0, [(Math.PI) / 180] * 360) ctx.globalCompositeOperation ) // 第三个粉色圆： ctx.beginPath() ctx.arc(500, 400, 200, 0, [(Math.PI) / 180] * 360) ctx.globalCompositeOperation
5.4K23编辑于 2022-12-22 - 来自专栏跟牛老师一起学WEBGIS
mapboxGL中区域掩膜的实现
map.on('move', addMapModal) 3.核心实现 通过map.project实现地理坐标到屏幕坐标的转换； 通过globalCompositeOperation = 'source-out coord[0], coord[1]) : ctx.lineTo(coord[0], coord[1]) }) ctx.closePath(); ctx.fill(); ctx.globalCompositeOperation = 'source-out'; ctx.rect(0, 0, canvas.width, canvas.height) ctx.fill(); ctx.globalCompositeOperation
59010编辑于 2024-01-11 - 来自专栏MixLab科技+设计实验室
从Storyboard到DIY实现一个漫画生成器-01
tensorflowJS版本的 mobilenet 模型来识别内容，posenet 来识别多个人物，然后 smartscrop.js 来实现图片的智能裁切，排版通过预设的模版，通过 canvas 的 globalCompositeOperation 主要熟悉 canvas 的 globalCompositeOperation 操作。 canvas.height=mask.naturalHeight; var img=document.querySelector('.pnew'); ctx.drawImage(mask,0,0); ctx.globalCompositeOperation
1.1K40发布于 2018-07-25 - 来自专栏全栈私房菜
canvas 高级功能（中）
我们知道，这是因为2D渲染上下文的globalCompositeOperation属性的默认值是source-over，并且这个属性定义了对 2D 渲染上下文上所有绘制图形执行的合成类型（11种可选方法之一 必须指出的是，根据赋值顺序的不同globalCompositeOperation的所有值可能会涉及源或目标的其中一个（取决于顺序），而不会同时涉及两者。 让我们先了解一下globalCompositeOperation支持的11种选择。使用下面的代码作为模板，你可以学习每一种合成操作。其中蓝色正方形是目标，而粉红色正方形是源。 ❞ source-over 这是默认值，它表示绘制的图形（源）将画在现有画布（目标）之上： context.globalCompositeOperation = "source-over"; 效果与目前学习到的绘图效果是完全相同的 destination-over 这个操作的值与前一个值相反，所以现在目标绘制在源之上： context.globalCompositeOperation = "destination-over";
1.2K20编辑于 2022-10-24 - 来自专栏跟牛老师一起学WEBGIS
openlayers中区域掩膜的实现
在地图容器中添加一个canvas，设置其在map之上； 监听map的postrender事件，每次事件触发重新绘制掩膜； 通过map.getPixelFromCoordinate实现地理坐标到屏幕坐标的转换； 通过globalCompositeOperation ctx.moveTo(coord[0], coord[1]) : ctx.lineTo(coord[0], coord[1]) }) ctx.closePath(); ctx.fill(); ctx.globalCompositeOperation = 'source-out'; ctx.rect(0, 0, canvas.width, canvas.height) ctx.fill(); ctx.globalCompositeOperation
57010编辑于 2024-12-30 - 来自专栏我的前端体系
Canvas 入门
1.Canvas 常用 api获取 2d 上下文对象let ctx = document.getElementById("canva").getContext("2d");globalCompositeOperation 图形组合方式的设置ctx.globalCompositeOperation = "destination-over";//新生成的图像在上方图片填充和背景// 3.设置背景填充色和边框色ctx.fillStyle
81750编辑于 2022-08-05 - 来自专栏前端自习课
【Web技术】774- 基于canvas完成图片裁剪工具
因为对于图片裁剪工具而言，img是应该绘画在最底层，所以需要通过globalCompositeOperation，将其绘画在底层。 (globalCompositeOperation表示如何将一个源（新的）图像绘制到目标（已有）的图像上。) ctx.save(); ctx.globalCompositeOperation = 'destination-over'; // ctx.translate(canvasWidth / ctx.fillStyle = 'rgba(0,0,0,0.5)'; ctx.fillRect(0, 0, canvasSize.width, canvasSize.height); ctx.globalCompositeOperation ctx.save(); ctx.globalCompositeOperation = 'destination-over'; ctx.translate(canvasWidth / 2,
1.6K20发布于 2020-11-19
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号