canvas画布属性globalAlpha 和 createRadialGradient函数出现的设置问题

时间：2015-05-16 20:09:47 阅读：145 评论：0 收藏：0 [点我收藏+]

标签：

今天用canvas做了一个页面特效，呼呼，在做的过程中发现createRadialGradient 和 globalAlpha这2个属性一起使用导入不能实现透明度问题，首先把createRadialGradient设置属性总结一下：

createRadialGradient() ：

创建一条放射颜色渐变。

参数：

xStart：开始圆的圆心的x坐标

yStart: 开始圆的圆心的Y坐标

radiusStart: 开始圆的半径

xEnd: 结束圆的圆心的x坐标

yEnd: 结束圆的圆心的Y坐标

radiusEnd : 结束圆的半径值

通过上面的设置我们可以实现一个canvas图形渐变效果：

技术分享

代码如下：

<script>
        window.onload = function () {
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            var radgrad = ctx.createRadialGradient(100, 100, 20, 100, 100, 50);
            radgrad.addColorStop(0, ‘blue‘);
            radgrad.addColorStop(1, ‘yellow‘);
            ctx.beginPath();
            ctx.arc(100, 100, 50, 0, Math.PI * 2);
            ctx.fillStyle = radgrad;
            ctx.fill();
        }
</script>

一个有渐变的圆就这么画好了，但是我想让它呈现透明状态，这个时候就需要添加globalAlpha属性了，这个是canvas中自带的，值范围是0 至 1

<script>
        window.onload = function () {
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            var radgrad = ctx.createRadialGradient(100, 100, 20, 100, 100, 50);
            radgrad.addColorStop(0, ‘blue‘);
            radgrad.addColorStop(1, ‘yellow‘);
            ctx.beginPath();
            ctx.arc(100, 100, 50, 0, Math.PI * 2);
            //添加透明设置
            ctx.globalAlpha = 0.2;
            ctx.fillStyle = radgrad;
            ctx.fill();
        }
</script>