<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid black;"> 創建canvas畫板，設置ID等屬性 </canvas> <script> var c=document.getElementById("myCanvas");/*獲取創建的ID爲myCanvas的畫板*/ var cxt= c.getContext("2d");/*創建在這個畫板上的畫筆*/ var grd=cxt.createLinearGradient(0,0,100,0); /*創建線性漸變顏色*/ /* cxt.createLinearGradient(x,y,a,b); 其中x y是起始點的座標，a b是結束點的座標。 * 也就是跟PS填充線性顏色的那條線是一樣的，創建一條線，有兩個座標，確定長度與方向。 * 然後在下邊的grd.addColorStop（）裏設定百分比以及顏色。 * 比如，線的起始點是（0，0）. 結束點是（100，0）。這條線段是100像素長度的筆直指向右邊的線，他會在座標 0-100之間進行向右的線性填充 * 如果線是一條斜線，那麼線性顏色的方向也就是斜的，跟PS裏一樣 * */ grd.addColorStop(0,"black");/*設定線的起始顏色*/ grd.addColorStop(1,"white");/*設定線的結束顏色*/ cxt.fillStyle=grd;/*填充顏色*/ cxt.fillRect(0,0,175,50);/*畫矩形*/ </script> </body> </html>具體效果如下：
思路解釋如下：
仍然是一個canvas標籤畫板，創建在body標籤裏
<canvas id="myCanvas" width="200" height="100" style="border:1px solid black;"> <!-- 創建canvas畫板，設置ID等屬性--> </canvas>
然後是繪製函數，script標籤裏，sc標籤放在body標籤裏
<script> var c=document.getElementById("myCanvas");/*獲取創建的ID爲myCanvas的畫板*/ var cxt= c.getContext("2d");/*創建在這個畫板上的畫筆*/ var grd=cxt.createLinearGradient(0,0,100,0); /*創建線性漸變顏色*/ /* cxt.createLinearGradient(x,y,a,b); 其中x y是起始點的座標，a b是結束點的座標。 * 也就是跟PS填充線性顏色的那條線是一樣的，創建一條線，有兩個座標，確定長度與方向。 * 然後在下邊的grd.addColorStop（）裏設定百分比以及顏色。 * 比如，線的起始點是（0，0）. 結束點是（100，0）。這條線段是100像素長度的筆直指向右邊的線，他會在座標 0-100之間進行向右的線性填充 * 如果線是一條斜線，那麼線性顏色的方向也就是斜的，跟PS裏一樣 * */ grd.addColorStop(0,"black");/*設定線的起始顏色*/ grd.addColorStop(1,"white");/*設定線的結束顏色*/ cxt.fillStyle=grd;/*填充顏色*/ cxt.fillRect(0,0,175,50);/*畫矩形*/ </script>其中主要是線性漸變顏色的原理，就是一條有方向以及長度的線段，然後設定顏色比重。與PS裏的那個線性填充一個原理。