Canvas globalAlpha透明度属性(转)

Canvas透明度控制
最新推荐文章于 2023-02-28 15:21:53 发布
转载 最新推荐文章于 2023-02-28 15:21:53 发布 · 6.5k 阅读 · 0
文章标签：

#javascript #canvas #透明

本文介绍如何使用globalAlpha属性控制HTML5 Canvas中图形的透明度，包括设置方法及应用实例。

<!DOCTYPE HTML>
<html>
<head>
<title>globalAlpha</title>
<script type="text/javascript">
function draw() {
var cxt = document.getElementById("myCanvas").getContext("2d");
cxt.fillStyle="#FD0";
cxt.fillRect(0,0,75,75);
cxt.fillStyle="#6C0"
cxt.fillRect(75,0,75,75);
cxt.fillStyle="#09F";
cxt.fillRect(0,75,75,75);
cxt.fillStyle="#F30";
cxt.fillRect(75,75,75,75);

cxt.fillStyle="#FFF";
cxt.globalAlpha=0.2;
for (i=0; i<7; i++)
{
cxt.beginPath();
cxt.arc(75,75,10+10*i,0,Math.PI*2,true);
cxt.fill();
}
}
</script>
</head>
<body onLoad="draw()">
<canvas id="myCanvas" width="150" height="150" style="border:2px solid #f6f;"></canvas>
</body>
</html>

 

显示效果如下：


 

【通过设置 globalAlpha 属性或者使用一个半透明颜色作为轮廓或填充的样式。这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。】

转自：http://www.cnblogs.com/naokr/archive/2012/02/12/2348407.html

canvas设置全局透明度globalAlpha（图文示例）
大剑师兰特的GIS世界
02-02 2010
如何设置canvas的全局透明度呢？通过globalAlpha设置就可以。`context.globalAlpha = value`;其中value就是设置的全局透明度，范围是0到1，范围以外的值会被忽略。使用globalAlpha设置透明度之后都是需要再进行还原设置的，而直接使用RGBA或者HSLA色值则没有这样的重置操作。
canvas详解02-样式和颜色控制
大雾起了清晨
06-23 4189
在绘制图形的章节里，我只用到默认的线条和填充样式。而在这一章里，我们将会探讨 canvas 全部的可选项，来绘制出更加吸引人的内容。
h5 canvas透明度图像边缘提取算法
愤怒的小江哥-移动游戏专栏
05-09 2090
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update }); function preload() { // atlas是地图集的意思，这里是一种资源，由png和json组成 game.load....
html5 globalalpha,全局透明图globalAlpha.htm
weixin_30613479的博客
07-04 171
Document#canvas{background: #ddd;}context.fillStyle = "rgb(63, 169, 245)"context.fillRect(50,50,100,100)context.globalCompositeOperation = 'source-over'//源在画布(目标)之上context.globalCompositeOperation = '...
[WPF] 实现区域透明的代码参考；
dwp10000的博客
02-17 786
首先说明，这个是部分代码，实现矩形框内才能显示底图； 第一张图显示矩形框，第二张图矩形框内显示底图； 注意：网格底图不再此文的讨论范围内，会在另外一个文中说明；本案例采用两个grid叠加的方式来实现； 顶层的grid定义； <Grid HorizontalAlignment="Left" Height="450" Margin="450,10,0,0" VerticalAlignment="Top" Width="800" x:Name="Mvgrid"/> 矩形框的定义 Recta
canvas的全局透明度和覆盖合成
01-07
这个属性影响到 canvas 里所有图形的透明度， 有效的值范围是 0.0 （完全透明）到 1.0（完全不透明） 默认是 1.0 覆盖合成 这里的source指的是：新的图像(源) 这里的destination指的是：已经绘制过的图形(目标) ...
详解HTML5 Canvas绘制时指定颜色与透明度的方法
09-28
颜色的指定是通过设置Canvas上下文(context)的样式属性来实现的，而透明度可以通过全局透明度属性globalAlpha或在颜色定义中加入alpha通道值来设置。 首先，我们要了解Canvas中关于颜色的设置方法。在Canvas中，...
canvas学习（十二）：图形透明及交叠效果设置
08-14
在HTML5的canvas元素中，`globalAlpha`属性用于设置绘制的所有图形的全局透明度。它的值范围是从0到1，其中0表示完全透明，1表示完全不透明。例如，在`12.globalAlpha.html`文件中，我们可以看到如何设置`global...
canvas globalCompositionOperation属性
01-20
同时，由于混合操作涉及到 alpha 通道的处理，所以透明度也会影响最终的显示结果。 此外，尝试在 `canvas` 上直接绘制文本可能会受到当前组合模式的影响，因为文本可能只在特定的组合模式下才可见。例如，如果源...
canvas处理图像改色（透明度、黑白）
KatyLight的博客
12-31 4232
canvas处理图像改色（透明度、黑白）
html中canvas设置透明度,HTML5 Canvas绘制时指定颜色与透明度的方法
weixin_39915721的博客
06-19 2091
这篇文章主要介绍了HTML5 Canvas绘制时指定颜色与透明度的方法,包括全局透明globalAlpha属性的介绍,需要的朋友可以参考下指定颜色黑色是Canvas绘制的默认色彩，要想换一种颜色的话，就得在实际画之前指定颜色。JavaScript Code复制内容到剪贴板ctx.strokeStyle = color指定绘制线的颜色：JavaScript Code复制内容到剪贴板ctx.fillS...
【绘制】HTML5 Canvas 中颜色与透明度（图文、示例）
苏一恒
08-26 5441
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 核心属性 Canvas实际应用中，颜色和透明度可以通过strokeStyle与fillStyle属性来设置。 可以用global...
画布背景透明canvas
m0_59453627的博客
02-28 3974
canvas画布背景透明
Canvas使用样式和颜色
ryan的博客
02-26 2080
1、色彩 默认色彩是黑色（#000000） fillStyle = color 设置图形的填充颜色。 strokeStyle = color 设置图形轮廓的颜色。 1.色板 function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i=0;i&...
canvas-文字相关
weixin_54057363的博客
03-09 238
canvas中文字绘制,文本边框及文本大小,文本字体的设置
HTML5之canvas
qq_42604709的博客
08-28 266
Canvas API 在网页上使用cnavas元素时，会创建一块矩形区域，默认大小是300*150px 坐标从左上角开始的，x轴沿着水平方向向右延伸，y轴垂直方向向下延伸 检测浏览器对canvas的支持情况: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;   &lt;metacharset="UTF-8"&gt;   &lt;tit...
利用canvas下载图片，透明区默认变为黑色
A_bet_of_three_years的博客
08-06 4358
问题：利用canvas下载图片，透明区默认变为黑色
Canvas学习笔记
LiuKairui的博客
10-04 882
HTML5的优势 跨平台:唯一一个通吃PC,Mac,Iphone,Android的跨平台语言 快速迭代 降低成本 导流入口多 分发效率高 Canvas 基本用法 什么是Canvas(画布) canvas是HTML5中的新增元素,可用于使用JavaScript中的脚本来绘制图形,创建动画,注意的是写Canvas的时候要标签要成对出现,这是为了提高兼容性, 另外Canvas的性能是极高的 Canvas 的默认是透明背景,但是支持设定自己的背景 Canvas 具有默认的宽高 替换内容 Canva
canvas调整透明度
最新发布
09-17
在canvas中，有不同的方式可以调整透明度。 ### 使用globalAlpha属性 `globalAlpha`属性可影响canvas里所有图形的透明度，其有效的值范围是从0.0（完全透明）到1.0（完全不透明），默认值为1.0。以下是示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden; } body{ background: pink; } #test{ background: gray; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } </style> </head> <body> <canvas id="test" width="300" height="300"> <span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span> </canvas> <script type="text/javascript"> window.onload=function(){ var canvas = document.querySelector("#test"); if(canvas.getContext){ var ctx = canvas.getContext("2d"); ctx.fillStyle="red"; // 设置透明度 ctx.globalAlpha = 0.5; ctx.fillRect(0,0,100,100); ctx.fillRect(100,100,100,100); } } </script> </body> </html> ``` 在上述代码里，`ctx.globalAlpha = 0.5`将后续绘制的图形透明度设为了0.5 [^1]。 ### 绘制半透明图形示例 以下代码通过`globalAlpha`属性绘制半透明圆： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>透明度实例</title> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 画背景 ctx.fillStyle = "#FD0"; ctx.fillRect(0, 0, 75, 75); ctx.fillStyle = "#6C0"; ctx.fillRect(75, 0, 75, 75); ctx.fillStyle = "#09F"; ctx.fillRect(0, 75, 75, 75); ctx.fillStyle = "#F30"; ctx.fillRect(75, 75, 75, 75); ctx.fillStyle = "#FFF"; // 设置透明度值 ctx.globalAlpha = 0.2; // 画半透明圆 for (let i = 0; i < 7; i++) { ctx.beginPath(); ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true); ctx.fill(); } </script> </body> </html> ``` 此代码中，`ctx.globalAlpha = 0.2`让后续绘制的圆呈现半透明效果 [^2]。 ### 在Unity中使用Canvas Group调整透明度 在Unity里，画布组 (Canvas Group) 可集中控制整组UI元素的某些方面，其中`Alpha`属性可控制组中UI元素的不透明度，该值介于0和1之间，0表示完全透明，1表示完全不透明。需要注意的是，UI元素自身的透明度会与画布组的`Alpha`值相乘 [^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值