Canvas globalAlpha透明度属性(转)
来源:互联网 发布:网络上市公司龙头股票 编辑:程序博客网 时间:2024/06/03 21:01
<!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透明度属性(转)
- HTML 5 canvas globalAlpha 属性
- Canvas globalAlpha绘出透明图形
- HTML5画布Canvas文本填充、线段属性、裁剪、透明度与像素合并方式
- HTML5画布Canvas文本填充、线段属性、裁剪、透明度与像素合并方式
- css中的透明度属性
- 透明度和zoom属性
- canvas 属性
- canvas绘制时的颜色与透明度
- html5 canvas学习--设置图形的透明度
- Canvas 像素处理之改变透明度
- Canvas 像素处理之改变透明度
- css 透明度属性继承问题
- html5之globalAlpha
- html中globalAlpha示例
- CANVAS属性及命令
- delphi canvas 属性知识
- Canvas 属性,方法
- 文章标题 JSP文件是否有必要放在WEB-INF下
- Redis的简单动态字符串——Simple Dynamic String
- 理解Windows内核模式与用户模式
- 堆区和栈区的区别
- Android Activity对话框(窗口)样式设置
- Canvas globalAlpha透明度属性(转)
- dump data
- 如何优雅地使用iPad阅读源代码
- Android中Application类的用法
- Android:异步消息Handler源码解析
- MyEclipse 2015优化技巧
- HTML DOM setInterval() 方法
- STM32学习笔记(一)-------GPIO口的操作
- Java遍历读取文件目录结构