36 canvas全局透明度&覆盖合成

最新推荐文章于 2024-05-17 16:33:04 发布
最新推荐文章于 2024-05-17 16:33:04 发布
阅读量402 收藏
点赞数
分类专栏： # canvas 前端重拾 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014331138/article/details/109363605
版权

36 canvas全局透明度&覆盖合成

1 全局透明度

语法

globalAlpha = value
		这个属性影响到 canvas 里所有图形的透明度，
		有效的值范围是 0.0 （完全透明）到 1.0（完全不透明）
		默认是 1.0

示例

	<head>
		<meta charset="UTF-8">
		<title>23_全局透明度</title>
		<style>
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">您的浏览器不支持canvas，请升级</canvas>
		<script type="application/javascript">
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.fillStyle = "red";
				ctx.globalAlpha = 0.5;
				ctx.fillRect(100,100,100,50);
			}
		</script>
	</body>

效果

2 覆盖合成

语法

覆盖合成
	source:新的图像(源)
	destination:已经绘制过的图形(目标)

	globalCompositeOperation
		source-over(默认值):源在上面,新的图像层级比较高
		source-in  :只留下源与目标的重叠部分(源的那一部分)
		source-out :只留下源超过目标的部分
		source-atop:砍掉源溢出的部分
		
		destination-over:目标在上面,旧的图像层级比较高
		destination-in:只留下源与目标的重叠部分(目标的那一部分)
		destination-out:只留下目标超过源的部分
		destination-atop:砍掉目标溢出的部分

示例

	<head>
		<meta charset="UTF-8">
		<title>24_覆盖合成</title>
		<style>
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">您的浏览器不支持canvas，请升级</canvas>
		<script type="application/javascript">
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.fillStyle = "red";
				ctx.fillRect(0,0,50,50);
				ctx.globalCompositeOperation = "source-over";
				ctx.fillStyle = "green";
				ctx.fillRect(20,20,50,50);
				
				ctx.fillStyle = "red";
				ctx.fillRect(100,100,50,50);
				ctx.globalCompositeOperation = "destination-over";
				ctx.fillStyle = "green";
				ctx.fillRect(120,120,50,50);
			}
		</script>
	</body>

效果

 

 

 

 

 

丨Anna丨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【three.js】设置canvas画布背景透明
qq_38196449的博客
06-16 175
通过Three.js渲染一个模型的时候，不希望canvas画布有背景颜色，也就是canvas画布完全透明，可以透过canvas画布看到画布后面叠加的HTML元素图文，呈现出来一种三维模型悬浮在网页上面的效果。比如我们现在的模型背景是黑色的，非常不美观，我们想把背景变透明，如何做呢？有时我们不想变透明，只想换一个别的颜色，那么如何改呢？
canvas-透明&合成的设置
weixin_54057363的博客
03-10 3738
canvas中使用globalAlpha()方法,设置透明度。使用 globalCompositeOperation()方法设置矩形之间覆盖合成
canvas实战之刮刮卡
达摩院洗碗工的博客
08-05 149
1.效果图 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pQeH0DOW-1596636799439)(https://s1.ax1x.com/2020/08/05/a6GU5n.png)] 2.html及css <canvas id="myCanvas"> 您的浏览器不支持canvas,请升级！ </canvas> <style> * { ma
canvas设置全局透明度globalAlpha（图文示例）
大剑师兰特的GIS世界
02-02 1644
如何设置canvas的全局透明度呢？通过globalAlpha设置就可以。`context.globalAlpha = value`;其中value就是设置的全局透明度，范围是0到1，范围以外的值会被忽略。使用globalAlpha设置透明度之后都是需要再进行还原设置的，而直接使用RGBA或者HSLA色值则没有这样的重置操作。
canvas的全局透明度和覆盖合成
weixin_43269800的博客
02-15 840
全局透明度的设置 globalAlpha = value 这个属性影响到 canvas 里所有图形的透明度， 有效的值范围是 0.0 （完全透明）到 1.0（完全不透明） 默认是 1.0 覆盖合成 这里的source指的是：新的图像(源) 这里的destination指的是：已经绘制过的图形(目标) globalCompositeOperation source-over(默认值):源在上面,...
canvas学习笔记-透明度
最新发布
m0_51181022的博客
05-17 866
在上面画一系列半径递增的半透明圆。圆叠加得越多，原先所画的圆的透明度会越低。通过增加循环次数，画更多的圆，从中心到边缘部分，背景图会呈现逐渐消失的效果。方法类似，就多了一个用于设置色彩透明度的参数。它的有效范围是从 0.0（完全透明）到 1.0（完全不透明）。里所有图形的透明度，有效的值范围是0.0（完全透明）到1.0（完全不透明），默认值是1.0。第二个例子和上面的那个类似，不过不是画圆，而是画矩形。可以分别设置轮廓和填充样式，因而具有更好的可操作性和使用灵活性。
Canvas 像素处理之改变透明度
热门推荐
实践求真知
04-12 1万+
一 定义和用法 getImageData()方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。 注意：ImageData对象不是图像，它规定了画布上一个部分（矩形），并保存了该矩形内每个像素的信息。 对于ImageData对象中的每个像素，都存在着四方面的信息，即RGBA值： R - 红色（0-255） G - 绿色（0-255） B - 蓝色（0-255） A
Canvas 像素处理之改变透明度的实现代码
09-22
最后，我们使用`putImageData()`将修改后的图像数据放回原位置，覆盖原有的图像，从而达到改变透明度的效果。 这段代码的运行结果会显示一个带有透明度调整的图片，透明度由`alpha`参数控制，其值范围在0到1之间，0...
详解HTML5 Canvas绘制时指定颜色与透明度的方法
09-28
主要介绍了HTML5 Canvas绘制时指定颜色与透明度的方法,包括全局透明globalAlpha属性的介绍,需要的朋友可以参考下
canvas学习（十二）：图形透明及交叠效果设置
08-14
NULL 博文链接：https://1017401036.iteye.com/blog/2314916
html5canvas亮度调整
08-20
html5canvas 像素亮度调整
canvas事件嵌套处理&页面布局
03-13
名称：Canvas 事件嵌套&页面布局资源包 适用平台：UniApp 主要功能：使用Canvas进行页面布局，实现元素嵌套事件管理 主要特性： 利用canvas提升页面渲染性能。 参考mini-program-rc实现页面布局，并借助...
canvas覆盖透明
虔诚的教徒
03-21 1867
html> html lang="en"> head> meta charset="UTF-8"> title>覆盖透明title> head> body> canvas id="canvas" >canvas> script type="text/javascript"> window.onload=function () {
canvas笔记--覆盖原则
qq_44758643的博客
09-23 1164
覆盖原则 globalCompositeOperation 可以有遮盖指定区域，清除画布中的某些部分 globalCompositeOperation = type 这个属性设定了在画新图形时采用的遮盖策略，其值是一个标识12种遮盖方式的字符串。 例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body onload="draw();"&g
【绘制】HTML5 Canvas 中颜色与透明度（图文、示例）
苏一恒
08-26 4222
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 核心属性 Canvas实际应用中，颜色和透明度可以通过strokeStyle与fillStyle属性来设置。 可以用global...
HTML5画布Canvas文本填充、线段属性、裁剪、透明度与像素合并方式
大熊的博客
01-10 2904
CSS3中的很多都可以类比与我们canvas的一些属性  canvas中“画笔”环境对象的很多属性都可以类比CSS3中的属性  我们不仅仅可以绘制图形，还可以向画布中添加文字 文字填充 同样先获取元素对象与环境对象 canvas id="myCanvas" width=500 height=500>canvas>11var canvas = document.getElement
HTML5 Canvas渐进填充与透明
jishublog
07-05 1332
详细解释HTML5 Canvas中渐进填充的参数设置与使用，Canvas中透明度的设置与使 用，结合渐进填充与透明度支持，实现图像的Mask效果。 一：渐进填充(Gradient Fill) Canvas支持两种渐进填充方式，一种为线性渐进填充(Line Gradient Fill)，另外一种称 为经向渐变填充(RadialGradient Fill)。其API分别为： create...
Canvas设置透明度
03-30
在Canvas中设置透明度可以使用`globalAlpha`属性。该属性可以设置当前绘图的透明度，它的取值范围为0-1，其中0表示完全透明，1表示完全不透明。 示例代码： ```javascript var canvas = document.getElementById('...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丨Anna丨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值