今天又再看了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）
