Canvas globalAlpha透明度属性(转)

最新推荐文章于 2024-03-19 13:55:37 发布
最新推荐文章于 2024-03-19 13:55:37 发布
阅读量6.3k 收藏
点赞数 2
分类专栏： html5 文章标签： javascript 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

dragoo1
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
地图打印软件 Global Mapper v18.0.0 b092616
10-28
一个可以查看和打印各类地图图形文件的软件，可以利用全球情报系统(GIS) 信息资源。
Canvas学习：globalCompositeOperation详解
weixin_33918357的博客
12-17 211
在默认情况之下，如果在Canvas之中将某个物体（源）绘制在另一个物体（目标）之上，那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面。 简单点讲，在Canvas中，把图像源和目标图像，通过Canvas中的globalCompositeOperation操作，可以得到不同的效果，比如下图： 正如上图，红苹果和黑色的圆，通过globalCompositeOperation的dest...
从零开始学习在VUE3中使用canvas(四)：globalAlpha(全局透明度)
最新发布
qq_45820271的博客
03-19 416
本文介绍了在canvas中使用全局透明度来实现canvas的透明效果
背景设置透明度影响全局背景颜色的解决方案
jiahui6666的博客
12-12 579
好多小伙伴都有这样一个需求:就是一个TitleBar根据上滑而改变渐变度,但是让手动设置setAlpha的时候会影响所有的背景颜色 解决方法:View.getBackground().setAlpha(int alpha); 改为 View.getBackground().mutate().setAlpha(int alpha); 因为setAlpha会共享自己的状态,而mutate()就是不让...
html中canvas设置透明度,HTML5 Canvas绘制时指定颜色与透明度的方法
weixin_39915721的博客
06-19 1803
这篇文章主要介绍了HTML5 Canvas绘制时指定颜色与透明度的方法,包括全局透明globalAlpha属性的介绍,需要的朋友可以参考下指定颜色黑色是Canvas绘制的默认色彩，要想换一种颜色的话，就得在实际画之前指定颜色。JavaScript Code复制内容到剪贴板ctx.strokeStyle = color指定绘制线的颜色：JavaScript Code复制内容到剪贴板ctx.fillS...
运用样式与颜色 --Canvas的基本操作
chenzhao635的专栏
02-01 856
1.fillStyle 和 strokeStyle属性 如果想要给图形上色，有两个重要的属性可以做到：fillStyle 和 strokeStyle。这两个属性的定义方法如下所示。 fillStyle = color strokeStyle = color strokeStyle是用于设置图形轮廓的颜色，而 fillStyle用于设置填充颜色。color 可以是表示 CSS 颜色值的字符串、渐变...
canvas处理图像改色（透明度、黑白）
KatyLight的博客
12-31 3567
canvas处理图像改色（透明度、黑白）
Canvas学习笔记
LiuKairui的博客
10-04 737
HTML5的优势 跨平台:唯一一个通吃PC,Mac,Iphone,Android的跨平台语言 快速迭代 降低成本 导流入口多 分发效率高 Canvas 基本用法 什么是Canvas(画布) canvas是HTML5中的新增元素,可用于使用JavaScript中的脚本来绘制图形,创建动画,注意的是写Canvas的时候要标签要成对出现,这是为了提高兼容性, 另外Canvas的性能是极高的 Canvas 的默认是透明背景,但是支持设定自己的背景 Canvas 具有默认的宽高 替换内容 Canva
【绘制】HTML5 Canvas 中颜色与透明度（图文、示例）
苏一恒
08-26 3876
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 核心属性 Canvas实际应用中，颜色和透明度可以通过strokeStyle与fillStyle属性来设置。 可以用global...
【微信小程序】组件canvas webgl 获取透明背景
牛哞哞杂记
12-12 3162
bb几句，一直想要设置画布透明，直到看到官方消息，可以直接获取透明画布了，贼开心！ 之前试的方法，在电脑上看挺好的，一拿起手机测试，画布就变成黑色。因为去掉场景的背景导致画布变成黑色。 现在小程序支持获取透明背景了，开心心 ❥ 可通过这段语句去获取透明画布 getContext(‘webgl’, { alpha: true }) 关于canvas的使用 代码： init: function(c...
HTML5之canvas
qq_42604709的博客
08-28 173
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的全局透明度和覆盖合成
01-07
这个属性影响到 canvas 里所有图形的透明度， 有效的值范围是 0.0 （完全透明）到 1.0（完全不透明） 默认是 1.0 覆盖合成 这里的source指的是：新的图像(源) 这里的destination指的是：已经绘制过的图形(目标) ...
Canvas 像素处理之改变透明度的实现代码
09-22
主要介绍了Canvas 像素处理之改变透明度的实现代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解HTML5 Canvas绘制时指定颜色与透明度的方法
09-28
主要介绍了HTML5 Canvas绘制时指定颜色与透明度的方法,包括全局透明globalAlpha属性的介绍,需要的朋友可以参考下
Canvas画布 js属性arcTo弧线画法详解
01-08
Canvas画布 js属性arcTo弧线画法详解 OK大家好，谢谢大家阅读我的文章，那么话不多说，我们直接进入正题。 关于Canvas画布，基本上都是前端工程师必须了解和掌握的一个知识点，那么看起来Canvas并不是那么的困难，...
HTML5重点知识小结——文本等细节样式处理
PINGER007的博客
03-12 317
一 背景类样式1、 背景图片：background-image 属性基本语法：background-image：URL（‘images/HTML.jpg’）;2、 背景重复：background-repeat 属性3、 背景定位：background-position 属性4、 背景关联：background-attachment 属性属性功能：用于设置背景图像是否固定或者随着页面的其余部分滚动基...
canvas的一些学习笔记>>>
zhouyi_nodejs的博客
11-19 360
canvas 制造2d环境: var txt = cvs.getContext(‘2d’); 绘制矩形: fillRect(x,y,width,height) : 绘制填满的矩形  strokeRect(x,y,width,height) : 绘制矩形的边框  clearRect(x,y,width,height) : 清除指定的区块，使该区块完全透明 设置绘图 f
利用canvas下载图片，透明区默认变为黑色
A_bet_of_three_years的博客
08-06 3920
问题：利用canvas下载图片，透明区默认变为黑色
vue canvas透明度
09-19
Canvas的透明度可以通过设置globalAlpha属性来实现。globalAlpha属性是一个介于0.0（完全透明）和1.0（完全不透明）之间的值。通过设置不同的值，可以控制绘制在Canvas上的内容的透明度。 代码示例： ``` var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.globalAlpha = 0.5; // 设置透明度为0.5，即半透明 ctx.fillStyle = "red"; ctx.fillRect(50, 50, 100, 100); ctx.globalAlpha = 1.0; // 恢复透明度为1.0，即完全不透明 ctx.fillStyle = "blue"; ctx.fillRect(150, 50, 100, 100); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值