HTML 5 canvas globalAlpha 属性

最新推荐文章于 2024-02-02 00:45:00 发布
最新推荐文章于 2024-02-02 00:45:00 发布
阅读量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
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML5 Canvas ( 图形的透明度和遮盖 ) globalAlpha, globalCompositeOperation
weixin_34379433的博客
03-30 466
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;canvas&lt;/title&gt; &lt;script type="text/javascript" src="../js/jQuery.js&
H5 canvas的globalAlpha属性
boonyaxnn的博客
07-20 508
定义：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（图文示例）
最新发布
大剑师兰特的GIS世界
02-02 1707
如何设置canvas的全局透明度呢？通过globalAlpha设置就可以。`context.globalAlpha = value`;其中value就是设置的全局透明度，范围是0到1，范围以外的值会被忽略。使用globalAlpha设置透明度之后都是需要再进行还原设置的，而直接使用RGBA或者HSLA色值则没有这样的重置操作。
全局阿尔法 globalAlpha
未玄的博客
09-01 1767
globalAlpha : 设置整个 Canvas 透明度的基数; 如果再设置透明度会在该基础上乘以设置的透明度 context.globalAlpha = 0.5; context.fillStyle = "rgba(255,0,0,0.75)";//实际透明度 0.5*0.75 context.fillRect(100,100,200,100);  ...
Canvas之globalAlpha和globalCompositeOperation
yunmegnze的博客
05-08 350
Canvas之globalAlpha和globalCompositeOperation前言一、区别二、使用方法1.globalAlpha2.globalCompositeOperation总结 前言 这里为Canvas画布的补充,是关于画布元素透明度的两个属性的用法和区别 一、区别 golbalAlpha 是使全局具有透明度 globalCompositeOperation 是渲染绘制的图像在重叠时的效果 globalAlpha = 1; globalCompositeOperation = "
HTML5 Canvas流动线条动画特效特效代码
03-20
透明度（opacity）的变化可能通过CSS3的`opacity`属性或者Canvas的`globalAlpha`属性来控制，使得线条有飘动的感觉。 在代码实现中，可能还涉及到了数学知识，例如贝塞尔曲线（Bezier curves）来创造平滑的线条过渡...
HTML5 Canvas炫酷3D背景动画代码HTML5 Canvas炫酷3D背景动画代码.zip
04-25
在Canvas或WebGL中，可以控制物体的颜色和光照效果，例如使用`globalAlpha`调整透明度，使用渐变或图案作为填充样式，以及模拟光源对物体的投射和反射。 6. **性能优化** 由于Canvas动画需要频繁重绘，性能优化至...
HTML5 Canvas流体加载动画特效
06-24
4. **透明度控制**：通过设置`globalAlpha`属性控制图形的透明度，可以创建出流动效果或淡入淡出的效果。 5. **时间控制**：根据加载的百分比和时间间隔更新图形状态，例如改变颜色段的位置、大小或速度，模拟流体...
HTML5 Canvas水彩画板涂色特效特效代码
03-20
为了实现水彩的扩散效果，可能还需要结合`globalAlpha`来调整透明度，以及`shadowBlur`和`shadowColor`来创建模糊边缘。 TweenMax.js是一个流行的JavaScript动画库，由GreenSock公司开发。在本项目中，TweenMax.js...
HTML5 Canvas图片倒影波纹特效
06-24
倒影可以通过在Y轴上翻转图片并渐变透明度来实现，使用`context.drawImage()`方法时，可以通过负的`y`坐标来实现翻转效果，并通过调整`globalAlpha`来控制透明度。 3. **波纹特效**： 波纹效果通常基于数学函数，...
Canvas globalAlpha绘出透明图形
boia
04-17 3153
var mycanvas = document.getElementById("mycanvas"); var context = mycanvas.getContext("2d"); context.fillStyle = "#ff0"; context.fillRect(0,0,150,150); context.fillStyle = "#0f0"; context.fillR
canvas中globalAlpha无效的问题
Hey firefly
04-18 1362
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...
html5 globalalpha,全局透明图globalAlpha.htm
weixin_30613479的博客
07-04 119
Document#canvas{background: #ddd;}context.fillStyle = "rgb(63, 169, 245)"context.fillRect(50,50,100,100)context.globalCompositeOperation = 'source-over'//源在画布(目标)之上context.globalCompositeOperation = '...
canvas笔记-globalAlpha和globaleCompositeOperation的使用
IT1995的博客
06-03 1229
如下代码： <!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
html中globalAlpha示例
行善之人必有余庆
05-26 555
globalAlpha function draw(id){ var context=document.getElementById('canvas').getContext('2d'); context.fillStyle='#fd0;' context.fillRect(0,0,75,75); context.fillStyle = '#6c0'; context.f
canvas详解02-样式和颜色控制
大雾起了清晨
06-23 3578
在绘制图形的章节里，我只用到默认的线条和填充样式。而在这一章里，我们将会探讨 canvas 全部的可选项，来绘制出更加吸引人的内容。
canvas(十一)合成与路径剪裁
陈小陈的博客
02-11 659
合成与路径剪裁 透明度合成 globalAlpha globalAlpha 就是全局对象的透明度，全局对象就是canvas 的上下文对象。 使用方法：ctx.globalAlpha=0.6; 注意：globalAlpha 要和颜色里的rgba 区别一下。rgba 控制的是某种颜色的透明度；globalAlpha 相当于是让整个画布变透明了。 const canvas=document.getElementById('canvas'); //canvas充满窗口 canvas.width=windo
html5：<canvas>标签实现动态效果
xuanbin303的博客
02-28 1951
new document         var canvas =document.getElementById('canvas'); var context=canvas.getContext('2d'); var x=-300; //八卦 context.translate(canvas.width/2,canvas.height/2); setInt
HTML5 Canvas深度解析与实战
- `globalAlpha`：调整整个图形的透明度。 - `shadow*` 属性：创建阴影效果。 1.4 文本绘制 - `fillText()`, `strokeText()`: 在画布上填充或描边文本。 - `font`：设置字体样式。 - `textAlign` 和 `textBaseline`...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值