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

今天用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>

接下来拿火狐和谷歌浏览器来对比一下子效果。

火狐：谷歌：

一开始看到这个状况突然懵了，这2个浏览器很少存在差异的，但今天给我碰上了。接下来我开始排查问题所在，一开始我以为是把设置透明度ctx.globalAlpha = 0.2;位置放的地方不对所造成的，可是试过之后没有反应。

接着换种方式，把createRadialGradient设置去掉之后圆就可以透明了，呼呼，关键点找到了，难道createRadialGradient和globalAlpha一起设置有冲突？不可能啊，一个是canvas属性，一个是canvas函数。怎么可能有冲突？脑子越想越陷入一个混乱状态。

就在我没有头绪的时候，我修改了一下createRadialGradient函数中的开始圆的半径为0，顿时火狐上呈现了圆透明效果，

火狐：谷歌：

Why? 我不知道啥原因，但是我解决了 - -！嚓，无语。。。

demo展示:http://109.kuailingmin.sinaapp.com/lights/index1.html

转载于:https://www.cnblogs.com/kuailingmin/p/4508222.html

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

HTML5中canvas画布属性,html5 Canvas之画布合成的属性总结
首先解释一下合成的含义,合成是指如何精细控制画布上面的对象的透明度和分层效果.其中控制Canvas画布合成的操作的两个属性分别是:globalAlpha和globalCompositeOperatio ...
【Unity3D-UGUI系列】（一）Canvas 画布组件详解
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享简书地址我的个人博客 QQ群:1040082875 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉 ...
linux修改index属性,WPF 通过设置Canvas.ZIndex属性修改图像的图层
WPF 通过设置Canvas.ZIndex属性修改图像的图层 WPF 通过设置Canvas.ZIndex属性修改图像的图层对Canvas.ZIndex,MSDN的解释是:获取或设置 Canvas 中 ...
HTML5 API详解（12）:canvas画布API提供的内容很丰富啊~
不考虑代码质量的话,一般来说css3>canvas>纯js. 1. css3动画是独立与js线程的,js的运算操作不会阻塞css3的动画,所以在系统cpu占用率较高的时候,css3的动画性 ...
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家 ...
从0开始canvas系列一 --- canvas画布
从0开始canvas系列从0开始canvas系列一 - canvas画布从0开始canvas系列二 - 文本和图像从0开始canvas系列三 - 图像像素级操作从0开始canvas系列四 - ...
android canvas 清空画布,清除canvas画布内容(点擦除+线擦除)
清空canvas画布内容 1.重置宽或高由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空:(此方法仅限需要清除全部内容的情况) var c=document.get ...
2D/3D视图变换、canvas画布
1,2D图形变换图形变换主要通过transform css属性来达到图形的旋转.平移.和缩放旋转旋转中心(基准点)为中心点,deg是角度制单位 transform: rotate(45deg); ...
three - 3 - 基础知识（1. three渲染结构，2.对canvas 进行响应式布局，3.让canvas 画布自适应设备分辨率）
本章节分为3点: 理解three.js 的渲染结构对canvas 进行响应式布局让canvas 画布自适应设备分辨率 canvas 画布的css尺寸和像素尺寸 1.three.js 的渲染结构接 ...

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

createRadialGradient() ：

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

最新文章

热门文章