用canvas做图像遮罩---globalCompositeOperation 属性

最新推荐文章于 2024-06-11 09:46:05 发布
最新推荐文章于 2024-06-11 09:46:05 发布
阅读量1.3w 收藏 6
点赞数 2
分类专栏： HTML5+CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30668579/article/details/51495909
版权
本文介绍了如何利用HTML5 canvas的globalCompositeOperation属性创建图像遮罩。通过设置不同的属性值，例如'destination-in'，可以实现显示源图像内的目标图像，从而达到遮罩效果。与CSS遮罩相比，canvas提供了更灵活的图形操作。
摘要由CSDN通过智能技术生成

globalCompositeOperation属性的官方解释：http://www.w3school.com.cn/tags/canvas_globalcompositeoperation.asp

globalCompositeOperation属性应用例子可以参考：http://blog.csdn.net/laijieyao/article/details/41862473

默认值： source-over
JavaScript 语法： context.globalCompositeOperation="source-in";

属性值

值 描述
source-over 默认。在目标图像上显示源图像。
source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out
最低0.47元/天 解锁文章
浅歌陌上
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html canvas 遮罩蒙版,canvas生成遮罩图片
weixin_35912365的博客
06-03 2806
首先我们知道css3中增加了不少好用、好玩的css3样式可以使用。今天我们要说到是遮罩。它的使用方式也不复杂，和background使用方式差不多。使用mask-image就可以使用，这样就可以通过图片合成一张带有形状的合成图了，不需要直接使用PS处理了。CSS遮罩——如何在CSS中使用遮罩，这篇文章已经详细说明了遮罩如何使用了，我这里就不赘述了。今天我这里想要说明的是，如何通过这个完成生成一个合...
记canvas画笔笔迹的多次优化过程
weixin_48967543的博客
04-29 905
我们的项目是面向学校老师的教学软件，所以肯定少不了互动白板的功能，而这个里面的画笔功能是由我来开发的，下面介绍这个过程中遇到的问题以及解决方法。 首先给大家明确下由于软件中的画布可以自由移动，会超出屏幕显示范围，同时支持点擦和线擦，所以需要存储所有点坐标。 第一版简单画笔实现并优化掉折线感领券网 https://www.cps3.cn/ 第一版实现的肯定是很简单的画笔线条，由给定的鼠标坐标位置连线画出线段，主要使用的canvas的API方法有：beginPath moveTo lineTo stroke..
html5画布直线运动,html5 canvas 实现光线沿不规则路径运动
weixin_33101399的博客
06-01 749
svg让动画沿着不规则路径运动查阅svg文档后发现，svg动画运动有两种实现方式，且都非常简单，但对于100%实现设计师给出的效果有很大的距离使用offset-path偏移路径和offset-roate偏移角度让元素沿着不规则路径走offset-path/offset-roate* {padding: 0;margin: 0;box-sizing: border-box;}body {backgr...
使用canvas绘制图片蒙版/获取绘制区域坐标/转成base64
最新发布
weixin_43811753的博客
06-11 232
基于vue2/canvas/绘制蒙版图/获取绘制区域坐标/转成base64image
canvas实现遮罩效果
Coding&Sharing
08-11 7911
今天做的一个网页要实现图片以平行四边形的样子展现出来，但是切图的时候要切成普通的图片，想了很久，最后是通过canvas绘制两个三角形来完成遮罩的效果。 最终效果图：提供的素材图片 好了，那么开始实现这种效果了1 . 将页面的结构写好，两个三角形的canvas画布和一张图片<div class="m-img"> <canvas id="m-triangle2" width="
html5 canvas 遮罩,详解基于canvas的视频遮罩插件
weixin_42336892的博客
05-30 695
为一个视频添加一个覆盖物，从而挡住视频某区域，在视频的某一时间段，比如第10到第20分钟不显示划定的这块区域。应用场景包括 遮挡卫视图标 、 遮挡视频右下角广告 、 充当马赛克 等。一个长视频可能包含多个遮罩，每个遮罩有特定的显示时间(在此时间外，隐藏该遮罩)。前端实现视频遮罩有 基于div 和 基于canvas 两种技术方案，本文是使用canvas完成的。主要原理是在HTML的video标签上贴...
canvas实现剪切蒙层
m0_37573249的博客
01-07 3972
canvas实现剪切蒙层。 在某些特殊业务场景下我们需要多图像进行裁剪，或者创建蒙层框选出某个特定的区域，要实现这样的场景其实思路有很多，但是考虑到canvas的性能、实现复杂度的问题来讲，都有各自的不足之处。首先来看如下图需求场景。
ec-canvas 实现echart图表显示
05-19
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
node-canvas-webgl:node-canvas 和 headless-gl 的集成
07-23
节点画布-webgl 和集成。演示：与三个js const fs = require ( 'fs' ) ;const THREE = require ( 'three' ) ;const GIFEncoder = require ( 'gifencoder' ) ;...const canvas = createCanvas ( width , height ) ;con
canvas-text-editor-tutorial:使用html5 canvas的简单文本编辑器
05-25
我将尝试通过创建一系列教程来解决此问题，以说明文本编辑器的所有重要方面，同时使用HTML5 canvas和许多JavaScript代码创建可用的应用程序。 以下是按优先级排列的编辑器功能要求列表： 键盘光标导航和选择； ...
android-canvas-donut-chart.7z
07-29
3. **设置Paint属性**：使用`Paint`对象可以设置颜色、线条宽度、填充风格等绘图属性。为了区分不同的数据项，可能需要创建多个Paint实例，并为每个部分设置不同的颜色。 4. **使用Canvas绘制**：在`onDraw()`方法...
jest-canvas-mock:用于在Jest中模拟画布的模块
05-09
{ " jest " : { " setupFiles " : [ " jest-canvas-mock " ] }} 如果已经具有setupFiles属性，则还可以将jest-canvas-mock附加到数组。 { " jest " : { " setupFiles " : [ " ./__setups__/other.js " ,
canvas自定义绘制顺序解决遮挡问题
~~~
06-24 2209
通过自定义绘制顺序来解决canvas的叠加遮挡问题。定义一个数组，把所有要执行的函数方法push到数组中，即把函数当做数组的元素存储在数组中，这样就可以通过数组的方法来操作这些函数，然后对函数按照自定义的顺序进行排序，需要先执行的放前面，后执行的放后面，最后遍历函数数组并执行其中的每个函数即可。
canvas操作像素的处理，图片操作例子，黑白蒙版等
10-19 952
经常拍照的同学会使用图片处理软件，给自己的照片加上各种效果。图片处理软件也是软件，同样也是由代码写的，那么如何实现图片处理呢，这章我们就探讨一下这个问题。这几个API中，过来过去绕不过一个对象就是ImageDataImageData对象到底是什么呢？其中widthheight就不用说了，分别是图片的宽度和高度，重点是这个data属性，他是一个对象，这个对象没听过？完全没问题，你就把他当做数组来处理，就可以了。这个“数组”是一个很长很长的一维数组，内容大概是这种形式的，其中。
微信小程序毕设遇到的坑2：canvas绘制图片，以及在绘制的图片上添加矩形遮挡物
weixin_45519185的博客
05-02 928
在利用微信小程序canvas时，遇到了诸多问题，特在此记录了其中一个。
html5 canvas 遮罩,HTML5 Canvas渐进填充与透明实现图像的Mask效果
weixin_33658509的博客
05-30 492
详细解释HTML5 Canvas中渐进填充的参数设置与使用，Canvas中透明度的设置与使用，结合渐进填充与透明度支持，实现图像的Mask效果。一：渐进填充(Gradient Fill)Canvas支持两种渐进填充方式，一种为线性渐进填充(Line Gradient Fill)，另外一种称为经向渐变填充(RadialGradient Fill)。其API分别为：createLinearGradie...
html canvas 遮罩,「Leaflet」使用 Canvas 遮罩优化过量的 HTML Marker
weixin_32306683的博客
06-02 573
场景我曾在实际的项目中遇到过这样的情况，一片区域内有 2000 多个 polygon 区块，每个区块的中心都要显示区块的信息文本，信息文本是自定义的 marker：L.marker(item.pos, {icon: L.divIcon({html: `${item.text}`,className: ""})});这也就意味着可视范围内总会出现“许多区块与许多 HTML 文本元素”，每次对地图的拖...
安卓canvas实现遮罩
aaaaaaaaaww12的博客
07-23 825
做项目时候经常出现要求画一个东西，但是画出来的东西我们只需要显示一部分，因此我们会有遮罩的要求，我这里就有一个最简单实现canvas遮罩的方法： Path path = new Path(); //最后一个参数是旋转顺逆方向，cw或ccw path.addCircle(圆心X,圆心Y,半径R, Path.Direction.CW ); if(Build.VERSION.SDK_INT >= 28){ canvas.clipP
uni-app canvas 遮罩层
09-08
您好！对于在uni-app中使用canvas遮罩层，可以按照以下步骤进行操作： 1. 在页面中定义一个canvas元素，例如： ```html <canvas id="myCanvas" style="width: 100%; height: 100vh;"></canvas> ``` 2. 在页面的`onReady`生命周期函数中，获取并保存canvas的上下文对象以及canvas的宽高信息： ```javascript onReady() { this.ctx = uni.createCanvasContext('myCanvas', this); this.canvasWidth = uni.upx2px(750); // 将750rpx转为px，具体数值根据实际情况调整 this.canvasHeight = uni.upx2px(1334); // 同上，根据实际情况调整 }, ``` 3. 在需要显示遮罩层的时候，使用canvas来绘制一个半透明的矩形遮罩层： ```javascript showMask() { this.ctx.setFillStyle('rgba(0, 0, 0, 0.5)'); // 设置遮罩层颜色和透明度 this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight); // 绘制矩形遮罩层 this.ctx.draw(); // 将绘制的内容显示在canvas上 }, ``` 4. 在需要隐藏遮罩层的时候，使用canvas清空之前绘制的内容： ```javascript hideMask() { this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // 清空canvas内容 this.ctx.draw(); // 将清空的内容显示在canvas上 }, ``` 通过以上步骤，您可以在uni-app中实现canvas遮罩层的效果。请根据您的实际需求进行调整和优化。希望对您有所帮助！如有任何问题，请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值