html5 canvas学习--设置图形的透明度

来源:互联网 发布:交通银行数据录入员 编辑:程序博客网 时间:2024/06/10 20:22
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript">function draw(){// 获取context对象var ctx = document.getElementById("myCanvas").getContext("2d");// 调整坐标的位置ctx.translate(200,20);// 循环遍历for(var i = 1;i<50;i++){// 保存状态ctx.save();// 矩阵转化ctx.transform(0.95,0,0,0.95,30,30);// 旋转ctx.rotate(Math.PI/12);// 开始路径ctx.beginPath();// 填充的样式ctx.fillStyle = 'rgba(255,0,0,'+(1-(i+10)/40)+')';// 画圆ctx.arc(0,0,50,0,Math.PI*2,true);// 闭合路径ctx.closePath();// 填充ctx.fill();}}window.onload = function(){draw();}</script></head><body><canvas id="myCanvas" width="700" height="300"></canvas></body></html>

0 0