使用HTML5 Canvas為圖片填滿顏色和紋理的教學_html5教學技巧

填滿顏色

藝術離不開色彩，今天咱們來介紹一下填充顏色，體會一下色彩的魅力。
填充顏色主要分為兩種：

1.基本色
2.漸層顏色（又分為線性漸層與徑向漸層）

我們一個個來看。

填滿基本顏色
Canvas fillStyle屬性用來設定畫布上形狀的基本顏色和填滿。 fillStyle使用簡單的顏色名稱。這看起來非常簡單，例如:

JavaScript Code複製內容到剪貼簿

1. context.fillStyle = "red";  

以下是出自 HTML4 規範的可用顏色字串值列表，共十六個。由於 HTML5 沒有修改專屬的顏色，HTML4 的顏色都可以在 HTML5 中正確顯示。

所有這些顏色值都可以套用到 strokeStyle 屬性和 fillStyle 屬性。
好了，我來總結一下填滿基本色的方法：（也可用於strokeStyle屬性）
（1） 使用顏色字串填滿。

JavaScript Code複製內容到剪貼簿

1. context.fillStyle = "red";  

（2）使用十六進位數字字串填入。

JavaScript Code複製內容到剪貼簿

1. context.fillStyle = "#FF0000";  

（3）使用十六進位數字字串簡寫形式填入。

JavaScript Code

複製內容到剪貼簿

1. context.fillStyle = "#F00";  

（4）使用rgb()方法設定顏色。

JavaScript Code

複製內容到剪貼簿

1. context.fillStyle = "rgb(255,0,0)";  

（5）使用rgba()方法設定顏色。 JavaScript Code

複製內容到剪貼簿

1. context.fillStyle = "rgba(255,0,0,1)";  

;  

此方法最後一個參數傳遞的是alpha值，透明度範圍為1（不透明）~0（透明）。 （6）使用hsl()方法設定顏色。

JavaScript Code

1. 複製內容到剪貼簿 context.fillStyle = 
"hsl(0,100%,50%)"

;  

;  

HSL即是代表色相（H），飽和度（S），明度（L）三個通道的顏色。

（7）使用hsla()方法設定顏色。

1. JavaScript Code複製內容到剪貼簿

context.fillStyle = 

"hsla(0,100%,50%,1)";  ;

以上7句程式碼都是填入"#FF0000"這個紅色。

填滿漸層形狀
在畫布上建立漸層填滿有兩個基本選項：線性或徑向。線性漸層可建立一個水平、垂直或對角線的填滿圖案。徑向漸層自中心點創建一個放射狀填充。填滿漸層形狀分為三個步驟：新增漸層線，為漸層線添加關鍵色，套用漸層。下面是它們的一些範例。
線性漸變
三步驟策略：
增加漸層線：

JavaScript Code複製內容到剪貼簿

1. var grd = context.createLinearGradient(xstart,ystart,xend,yend);  

為漸層線添加關鍵色(類似顏色斷點)：

JavaScript Code複製內容到剪貼簿

1. grd.addColorStop(stop,color);  

這裡的stop傳遞的是 0 ~ 1 的浮點數，代表斷點到(xstart,ystart)的距離佔整個漸變色長度是比例。

應用漸層：

JavaScript Code複製內容到剪貼簿

1. context.fillStyle = grd;   
2. context.strokeStyle = grd;  

寫個程式碼來看看。

JavaScript Code複製內容到剪貼簿

1. html>   
2. "zh">   
3.   
4.      "UTF-8">   
5.        
6.   
7.   
8. "canvas-warp">   
9.     "canvas" style="border 1px sol5; ">   
10.         你的瀏覽器居然不支援Canvas？ ！趕快換一個吧！ ！   
11.        

  

  

<script>   </script>

    window.onload = function(){   

        var canvas = document.getElementById(">        canvas.width = 800;   

        canvas.height = 600;   

        

var

 context = canvas.getContext("21.            context.rect(200,100,400,400);   

  

        

//增加漸層線

  

        var grd = context.createLinearGradient(200,300,6d = context.createLinearGradient(200,300,6d = context.createLinearGradient(200,300,600,300);

  

        //增加色彩斷點

  

        grd.addColorStop(0,

"black");   );   

        grd.addColorStop(0.5,"white");   

);   );   

);   

);   );   

        grd.addColorStop(1,

"black");   );   

  

        

//塗抹漸層

  

        context.fillStyle = grd;   

  

        context.fill();   

  

    }