今天又再看了html5的顏色漸變API，發現沒有第一次看那么復雜。
不過我對這個顏色漸變存在著一個疑惑就是兩種色帶之間，那段是屬于兩種顏色混合的，有點模糊。
比如從紅色變成黃色，在紅與黃之間的那個地方，不會是純色的紅和黃，我一開始不是很明白，現在我是理解的：漸變顏色嘛，字面上的意思，就是漸變，在這兩種顏色之間，由一種顏色漸變過渡到另一種顏色。
一、創建漸變顏色對象的步驟蠻簡單的，線性漸變比徑向漸變少了兩個參數而已。具體步驟是這樣的：
1、獲取到你的canvas畫布后，我們需要創建顏色漸變對象 ? var gradient
2、設置要漸變的顏色帶 ? addColorStop(顏色帶的所在點,"顏色")
3、將顏色漸變對象賦值給填充類型 fillStyle
4、進行繪制
ok了！
<
body
>
<!--
作者：1107989194@qq.com
時間：2014-04-12
描述：漸變色 linear radial
-->
<
canvas
id
="myCanvas"
width
="300"
height
="150"
style
="border: 1px solid black"
></
canvas
>
<
script
>
var
myCanvas
=
document.getElementById(
"
myCanvas
"
);
var
context
=
myCanvas.getContext(
"
2d
"
);
var
gradient
=
context.createLinearGradient(
0
,
0
,myCanvas.width,
0
);
//
創建顏色漸變對象
gradient.addColorStop(
0
,
'
blue
'
);
//
設置顏色停止點(過渡顏色所在位置)
gradient.addColorStop(
0.25
,
'
white
'
);
gradient.addColorStop(
0.5
,
'
purple
'
);
gradient.addColorStop(
0.75
,
'
red
'
);
gradient.addColorStop(
1.0
,
'
yellow
'
);
context.fillStyle
=
gradient;
//
把漸變對象賦值給填充類型
context.fillRect(
0
,
0
,myCanvas.width,myCanvas.height);
//
繪制圖形
</
script
>
<!--
作者：1107989194@qq.com
時間：2014-04-12
描述：徑向漸變
-->
<
canvas
id
="myCanvas2"
width
="300"
height
="150"
style
="border: 1px solid black"
>
換個瀏覽器唄
</
canvas
>
<
script
>
var
myCanvas2
=
document.getElementById(
"
myCanvas2
"
);
var
context2
=
myCanvas2.getContext(
"
2d
"
);
//
var gradient2 = context.createRadialGradient(0,0,myCanvas2.width,myCanvas2.width,myCanvas2.height,myCanvas2.height); //創建顏色徑向漸變對象
var
gradient2
=
context2.createRadialGradient(myCanvas2.width
/
2,myCanvas2.height
/
2
,
0
,myCanvas2.width
/
2,myCanvas2.height
/
2
,
100
);
//
創建顏色徑向漸變對象(一個圓從中間向四周徑向漸變)
gradient2.addColorStop(
0
,
'
blue
'
);
//
設置顏色停止點(過渡顏色所在位置)
gradient2.addColorStop(
0.25
,
'
white
'
);
gradient2.addColorStop(
0.5
,
'
purple
'
);
gradient2.addColorStop(
0.75
,
'
red
'
);
gradient2.addColorStop(
1.0
,
'
yellow
'
);
context2.fillStyle
=
gradient2;
context2.fillRect(
0
,
0
,myCanvas2.width,myCanvas2.height);
</
script
>
</
body
>
兩種顏色漸變函數的參數說明：
context.createLinearGradient(
x0
,
y0
,
x1
,
y1
);
| 參數 | 描述 |
|---|---|
| x0 | 漸變開始點的 x 坐標 |
| y0 | 漸變開始點的 y 坐標 |
| x1 | 漸變結束點的 x 坐標 |
| y1 | 漸變結束點的 y 坐標 |
?
context.createRadialGradient(
x0
,
y0
,
r0
,
x1
,
y1
,
r1
);
| 參數 | 描述 |
|---|---|
| x0 | 漸變的開始圓的 x 坐標 |
| y0 | 漸變的開始圓的 y 坐標 |
| r0 | 開始圓的半徑 |
| x1 | 漸變的結束圓的 x 坐標 |
| y1 | 漸變的結束圓的 y 坐標 |
| r1 | 結束圓的半徑 |
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 createLinearGradient() 方法、createRadialGrradient()方法。
注釋：Internet Explorer 8 或更早的瀏覽器不支持 <canvas> 元素。
?
關于徑向漸變，我自己覺得最簡單的理解就是：
例如我們要徑向漸變一個圓，從圓心往四周顏色漸變，那么圓心所在的那個圓的坐標就是(x1,y1) r1=0，漸變的大圓的坐標（x2,y2） r2=r(r為圓的半徑)。
這是上面徑向漸變的代碼的效果截圖：
從圓心（blue）——>四周（yellow）
HTML5的漸變色 漸變的兩種類型 createLinearGradient 和createRadialGradient
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
