今天用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函数出现的设置问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。