HTML 5 canvas globalAlpha 属性

最新推荐文章于 2024-08-11 18:23:18 发布
最新推荐文章于 2024-08-11 18:23:18 发布
阅读量1k 收藏
点赞数 1
分类专栏： canvas

HTML 5 canvas globalAlpha 属性


定义和用法

globalAlpha 属性设置或返回绘图的当前透明值（alpha 或 transparency）。

globalAlpha 属性值必须是介于 0.0（完全透明） 与 1.0（不透明） 之间的数字。

默认值： 1.0
JavaScript 语法： context.globalAlpha=number;

属性值

值 描述
number 透明值。必须介于 0.0（完全透明） 与 1.0（不透明） 之间。


实例

首先，绘制一个红色的矩形，然后将透明度 (globalAlpha) 设置为 0.2，然后再绘制一个绿色和一个蓝色的矩形：


<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);

//Turn transparency on
ctx.globalAlpha=0.2;
ctx.fillStyle="green"; 
ctx.fillRect(50,50,75,50); 
ctx.fillStyle="blue"; 
ctx.fillRect(80,80,75,50);
</script>
</body>


转自w3school

ssisse
关注
专栏目录
canvas详解02-样式和颜色控制
大雾起了清晨
06-23 3630
在绘制图形的章节里，我只用到默认的线条和填充样式。而在这一章里，我们将会探讨 canvas 全部的可选项，来绘制出更加吸引人的内容。
HTML5 Canvas流体加载动画特效
06-24
4. **透明度控制**：通过设置`globalAlpha`属性控制图形的透明度，可以创建出流动效果或淡入淡出的效果。 5. **时间控制**：根据加载的百分比和时间间隔更新图形状态，例如改变颜色段的位置、大小或速度，模拟流体...
canvas设置全局透明度globalAlpha（图文示例）
大剑师兰特的GIS世界
02-02 1732
如何设置canvas的全局透明度呢？通过globalAlpha设置就可以。`context.globalAlpha = value`;其中value就是设置的全局透明度，范围是0到1，范围以外的值会被忽略。使用globalAlpha设置透明度之后都是需要再进行还原设置的，而直接使用RGBA或者HSLA色值则没有这样的重置操作。
Canvas 设置全局透明度 GlobalAlpha
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-11 1084
它不仅能够为图形添加透明度，还能够与其他属性和技术相结合，创造出更加丰富多彩的视觉效果。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。小于 1 时，所有绘制的内容都会按照该值的透明度进行混合，其中 0 表示完全透明，1 表示完全不透明。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，在实际开发中，我们可能会遇到一些特定的需求，比如创建模糊效果或者渐变透明度的动画。属性，它可以用来设置绘制时的整体透明度。
canvas(十一)合成与路径剪裁
陈小陈的博客
02-11 662
合成与路径剪裁 透明度合成 globalAlpha globalAlpha 就是全局对象的透明度，全局对象就是canvas 的上下文对象。 使用方法：ctx.globalAlpha=0.6; 注意：globalAlpha 要和颜色里的rgba 区别一下。rgba 控制的是某种颜色的透明度；globalAlpha 相当于是让整个画布变透明了。 const canvas=document.getElementById('canvas'); //canvas充满窗口 canvas.width=windo
cancas_04 canvas合成
aoshisen的博客
08-20 211
文章目录透明度合成 globalAlpha路径裁剪全局合成globalCompositeOperation全局合成的属性值总结 透明度合成 globalAlpha 什么是globalAlpha？ globalAlpha 就是全局对象的透明度，全局对象就是canvas 的上下文对象。 使用方法：ctx.globalAlpha=0.6; 注意：globalAlpha 要和颜色里的rgba 区别一下。rgba 控制的是某种颜色的透明度；globalAlpha 相当于是让整个画布变透明了 路径裁剪 什么是路径
HTML5中canvas画布属性,html5 Canvas之画布合成的属性总结
weixin_32137855的博客
06-04 602
首先解释一下合成的含义，合成是指如何精细控制画布上面的对象的透明度和分层效果。其中控制Canvas画布合成的操作的两个属性分别是：globalAlpha和globalCompositeOperation一、globalAlpha：这个属性的默认值是1.0(完全不透明)，并且可以设置从0.0(完全透明)到1.0的值，需要注意的是，这个属性必须在图形绘制之前设置二、globalCompositeOpe...
HTML5 Canvas图片倒影波纹特效
06-24
倒影可以通过在Y轴上翻转图片并渐变透明度来实现，使用`context.drawImage()`方法时，可以通过负的`y`坐标来实现翻转效果，并通过调整`globalAlpha`来控制透明度。 3. **波纹特效**： 波纹效果通常基于数学函数，...
HTML5 Canvas光标丝带动画特效
07-24
例如，可以使用`lineWidth`属性设置线条宽度，`strokeStyle`设置线条颜色，而通过调整线条的透明度（`globalAlpha`属性）可以使线条逐渐淡出，模拟丝带飘动的感觉。此外，还可以使用定时器或requestAnimationFrame来...
HTML5 Canvas流动线条动画特效特效代码
03-20
透明度（opacity）的变化可能通过CSS3的`opacity`属性或者Canvas的`globalAlpha`属性来控制，使得线条有飘动的感觉。 在代码实现中，可能还涉及到了数学知识，例如贝塞尔曲线（Bezier curves）来创造平滑的线条过渡...
html5 canvas熊熊火焰动画特效
09-08
2. **透明度变化**：火焰边缘通常比中心更透明，可以通过调整形状的不透明度（`globalAlpha`属性）来模拟这一特性。 3. **形状动态**：火焰并非静止不动，而是不断颤动和扭曲。我们可以通过随机调整每个形状的位置...
【前端与后端的桥梁】——信息化人员必备知识&面试宝典：SQL优化实战手册
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-31 1051
SQL优化是一门艺术，也是科学，需要不断实践与学习。作为前端开发者，理解SQL优化不仅能促进与后端团队的高效沟通，更能从数据层面提升前端应用的性能。在日常开发中，记得关注查询性能、利用索引、避免全表扫描，并时刻警惕SQL注入的风险。引发讨论：在你的项目中，遇到过哪些SQL优化的难题？或是有哪些独到的优化技巧愿意与大家分享？欢迎在评论区留言，我们一起探讨，共同进步！欢迎来到我的博客，很高兴能够在这里和您见面！
html5 globalalpha,全局透明图globalAlpha.htm
weixin_30613479的博客
07-04 120
Document#canvas{background: #ddd;}context.fillStyle = "rgb(63, 169, 245)"context.fillRect(50,50,100,100)context.globalCompositeOperation = 'source-over'//源在画布(目标)之上context.globalCompositeOperation = '...
Canvas之globalAlpha和globalCompositeOperation
yunmegnze的博客
05-08 351
Canvas之globalAlpha和globalCompositeOperation前言一、区别二、使用方法1.globalAlpha2.globalCompositeOperation总结 前言 这里为Canvas画布的补充,是关于画布元素透明度的两个属性的用法和区别 一、区别 golbalAlpha 是使全局具有透明度 globalCompositeOperation 是渲染绘制的图像在重叠时的效果 globalAlpha = 1; globalCompositeOperation = "
全局阿尔法 globalAlpha
未玄的博客
09-01 1771
globalAlpha : 设置整个 Canvas 透明度的基数; 如果再设置透明度会在该基础上乘以设置的透明度 context.globalAlpha = 0.5; context.fillStyle = "rgba(255,0,0,0.75)";//实际透明度 0.5*0.75 context.fillRect(100,100,200,100);  ...
H5 canvas的globalAlpha属性
boonyaxnn的博客
07-20 511
定义：globalAlpha 属性值必须是结余0.0（完全透明）与1.0（不透明）之间的数字 JS语法：context.globalAlpha =number 例如： var radious = 0; var draw = function () { context.clearRect(0, 0, 200, 200) context.globalAlpha = (context.globalAlpha - 0.01 + 1) % 1; radi
canvas中globalAlpha无效的问题
Hey firefly
04-18 1367
canvas中的globalAlpha属性用来设置全局的透明度，但是下面的代码显示出来的确有一个元素（圆圈）的透明度没有改变，如图 var ctx = canvas.getContext('2d'); for(let i = 0; i< 10; i++){ for(let j = 0; j< 10; j++){ ctx.fillStyle = 'rgb(' + Math.flo...
canvas笔记-globalAlpha和globaleCompositeOperation的使用
IT1995的博客
06-03 1237
如下代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;"&gt
从零开始学习在VUE3中使用canvas(四)：globalAlpha(全局透明度)
qq_45820271的博客
03-19 738
本文介绍了在canvas中使用全局透明度来实现canvas的透明效果
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值