使用HTML5 Canvas為圖片填充顏色和紋理的教程
我要評論填充顏色
藝術離不開色彩，今天咱們來介紹一下填充顏色，體會一下色彩的魅力。
填充顏色主要分為兩種：
1.基本顏色
2.漸變顏色（又分為線性漸變與徑向漸變）
我們一個個來看。
填充基本顏色
Canvas fillStyle屬性用來設置畫布上形狀的基本顏色和填充。fillStyle使用簡單的顏色名稱。這看起來非常簡單，例如:
- context.fillStyle = "red";
下面是出自 HTML4 規(guī)范的可用顏色字符串值列表，共十六個。由于 HTML5 沒有修改專屬的顏色，HTML4 的顏色都可以在 HTML5 中正確顯示。
所有這些顏色值都可以應用到 strokeStyle 屬性和 fillStyle 屬性中。
好了，我來總結(jié)一下填充基本色的方法：（也可用于strokeStyle屬性）
（1） 使用顏色字符串填充。
- context.fillStyle = "red";
（2）使用十六進制數(shù)字字符串填充。
- context.fillStyle = "#FF0000";
（3）使用十六進制數(shù)字字符串簡寫形式填充。
- context.fillStyle = "#F00";
（4）使用rgb()方法設置顏色。
- context.fillStyle = "rgb(255,0,0)";
（5）使用rgba()方法設置顏色。
JavaScript Code復制內(nèi)容到剪貼板
- context.fillStyle = "rgba(255,0,0,1)";
此方法最后一個參數(shù)傳遞的是alpha值，透明度范圍為1（不透明）~0（透明）。
（6）使用hsl()方法設置顏色。
- context.fillStyle = "hsl(0,100%,50%)";
HSL即是代表色相（H），飽和度（S），明度（L）三個通道的顏色。
（7）使用hsla()方法設置顏色。
- context.fillStyle = "hsla(0,100%,50%,1)";
以上7句代碼都是填充"#FF0000"這個紅色。
填充漸變形狀
在畫布上創(chuàng)建漸變填充有兩個基本選項：線性或徑向。線性漸變創(chuàng)建一個水平、垂直或者對角線的填充圖案。徑向漸變自中心點創(chuàng)建一個放射狀填充。填充漸變形狀分為三步：添加漸變線，為漸變線添加關鍵色，應用漸變。下面是它們的一些示例。
線性漸變
三步走戰(zhàn)略：
添加漸變線：
- var grd = context.createLinearGradient(xstart,ystart,xend,yend);
為漸變線添加關鍵色(類似于顏色斷點)：
- grd.addColorStop(stop,color);
這里的stop傳遞的是 0 ~ 1 的浮點數(shù)，代表斷點到(xstart,ystart)的距離占整個漸變色長度是比例。
應用漸變：
- context.fillStyle = grd;
- context.strokeStyle = grd;
寫個代碼來看看。
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8">
- <title>填充線性漸變</title>
- </head>
- <body>
- <div id="canvas-warp">
- <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
- 你的瀏覽器居然不支持Canvas？！趕快換一個吧！！
- </canvas>
- </div>
- <script>
- window.onload = function(){
- var canvas = document.getElementById("canvas");
- canvas.width = 800;
- canvas.height = 600;
- var context = canvas.getContext("2d");
- context.rect(200,100,400,400);
- //添加漸變線
- var grd = context.createLinearGradient(200,300,600,300);
- //添加顏色斷點
- grd.addColorStop(0,"black");
- grd.addColorStop(0.5,"white");
- grd.addColorStop(1,"black");
- //應用漸變
- context.fillStyle = grd;
- context.fill();
- }
- </script>
- </body>
- </html>
運行結(jié)果：
我覺得有必要做一個圖解，方便大家一次性理解漸變。
為了方便理解，建議把漸變線看成是一個有向線段。如果熟悉PS等繪圖工具，用過其中的漸變色設置，應該會很好理解。
這里漸變線的起點和終點不一定要在圖像內(nèi)，顏色斷點的位置也是一樣的。但是如果圖像的范圍大于漸變線，那么在漸變線范圍之外，就會自動填充離端點最近的斷點的顏色。
這里配合兩個補充函數(shù)再舉一例。
繪制矩形的快捷方法
- fillRect(x,y,width,height)、stroke(x,y,width,height)。這兩個函數(shù)可以分別看做rect()與fill()以及rect()與stroke()的組合。因為rect()僅僅只是規(guī)劃路徑而已，而這兩個方法確實實實在在的繪制。
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8">
- <title>填充線性漸變</title>
- </head>
- <body>
- <div id="canvas-warp">
- <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
- 你的瀏覽器居然不支持Canvas？！趕快換一個吧??！
- </canvas>
- </div>
- <script>
- window.onload = function(){
- var canvas = document.getElementById("canvas");
- canvas.width = 800;
- canvas.height = 600;
- var context = canvas.getContext("2d");
- //添加漸變線
- var grd = context.createLinearGradient(100,300,700,300);
- //添加顏色斷點
- grd.addColorStop(0,"olive");
- grd.addColorStop(0.25,"maroon");
- grd.addColorStop(0.5,"aqua");
- grd.addColorStop(0.75,"fuchsia");
- grd.addColorStop(0.25,"teal");
- //應用漸變
- context.fillStyle = grd;
- context.strokeStyle = grd;
- context.strokeRect(200,50,300,50);
- context.strokeRect(200,100,150,50);
- context.strokeRect(200,150,450,50);
- context.fillRect(200,300,300,50);
- context.fillRect(200,350,150,50);
- context.fillRect(200,400,450,50);
- context.fillRect(0,550,800,25);
- }
- </script>
- </body>
- </html>
運行結(jié)果：
這兩個頁面都是水平漸變，但是要清楚線性漸變不一定是水平的，方向可以是任意的，通過漸變線的端點來設置方向。
徑向漸變
同樣是三步走戰(zhàn)略，只不過是第一步的所用方法變了。
添加漸變圓：
- var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);
為漸變線添加關鍵色(類似于顏色斷點)：
- grd.addColorStop(stop,color);
應用漸變：
- context.fillStyle = grd;
- context.strokeStyle = grd;
線性漸變是基于兩個端點定義的，但是徑向漸變是基于兩個圓定義的。
我們把示例7-2改寫一下。
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8">
- <title>填充徑向漸變</title>
- </head>
- <body>
- <div id="canvas-warp">
- <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
- 你的瀏覽器居然不支持Canvas？！趕快換一個吧！！
- </canvas>
- </div>
- <script>
- window.onload = function(){
- var canvas = document.getElementById("canvas");
- canvas.width = 800;
- canvas.height = 600;
- var context = canvas.getContext("2d");
- //添加漸變線
- var grd = context.createRadialGradient(400,300,100,400,300,200);
- //添加顏色斷點
- grd.addColorStop(0,"olive");
- grd.addColorStop(0.25,"maroon");
- grd.addColorStop(0.5,"aqua");
- grd.addColorStop(0.75,"fuchsia");
- grd.addColorStop(0.25,"teal");
- //應用漸變
- context.fillStyle = grd;
- context.fillRect(100,100,600,400);
- }
- </script>
- </body>
- </html>
運行結(jié)果：
怎么感覺這個顏色搭配那么的……算了，這個就叫做藝術。
createRadialGradient(x0,y0,r0,x1,y1,r1);方法規(guī)定了徑向漸變開始和結(jié)束的范圍，即兩圓之間的漸變。
總結(jié)一下，這節(jié)課我們學習了fillStyle、createLinearGradient()、createRadialGradient()、addColorStop()、fillRect()、strokeRect()等屬性和方法，詳細介紹了填充基本色、線性漸變、徑向漸變。
好了，現(xiàn)在學會了上色，那么盡情的使用色彩，繪制出屬于我們自己的藝術品吧！
填充紋理
createPattern()簡介
紋理其實就是圖案的重復，填充圖案通過createPattern()函數(shù)進行初始化。它需要傳進兩個參數(shù)createPattern(img,repeat-style)，第一個是Image對象實例，第二個參數(shù)是String類型，表示在形狀中如何顯示repeat圖案?？梢允褂眠@個函數(shù)加載圖像或者整個畫布作為形狀的填充圖案。
有以下4種圖像填充類型：
1.平面上重復：repeat;
2.x軸上重復：repeat-x;
3.y軸上重復：repeat-y;
4.不使用重復：no-repeat;
其實createPattern()的第一個參數(shù)還可以傳入一個canvas對象或者video對象，這里我們只講解Image對象，其余的大家自己嘗試。
創(chuàng)建并填充圖案
首先看一下怎么加載圖像：
創(chuàng)建Image對象
為Image對象指定圖片源
代碼如下：
- var img = new Image(); //創(chuàng)建Image對象
- img.src = "8-1.jpg"; //為Image對象指定圖片源
擴展：HTML中的相對路徑
'./目錄或文件名' 或者 '目錄或文件名' 是指當前操作的文件所在目錄的路徑
'../目錄或文件名' 是指當前所操作的文件所在目錄的上一級目錄的路徑
之后填充紋理：
- var pattern = context.createPattern(img,"repeat");
- context.fillStyle = pattern;
我們直接看一段完整的程序，這里我要重復填充這個萌萌的長頸鹿作為紋理。需要注意的是，選擇圖片時一定要選擇那種左右互通，上下互通的圖片做為紋理，這樣看上去才不會有不自然的短接處。
下面提供代碼。
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8">
- <title>填充紋理</title>
- </head>
- <body>
- <div id="canvas-warp">
- <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
- 你的瀏覽器居然不支持Canvas？！趕快換一個吧??！
- </canvas>
- </div>
- <script>
- window.onload = function(){
- var canvas = document.getElementById("canvas");
- canvas.width = 800;
- canvas.height = 600;
- var context = canvas.getContext("2d");
- var img = new Image();
- img.src = "8-1.jpg";
- img.onload = function(){
- var pattern = context.createPattern(img, "repeat");
- context.fillStyle = pattern;
- context.fillRect(0,0,800,600);
- }
- }
- </script>
- </body>
- </html>
運行結(jié)果：
這里使用了Image的onload事件，它的作用是對圖片進行預加載處理，即在圖片加載完成后才立即除非其后function的代碼體。這個是必須的，如果不寫的話，畫布將會顯示黑屏。因為沒有等待圖片加載完成就填充紋理，導致瀏覽器找不到圖片。
這里使用了"repeat"，童鞋們也可嘗試使用一下其他三個值，看看會有什么不同的效果。也可以自己找一下其他的圖片嘗試填充，看看效果。
相關文章
HTML5 Canvas實現(xiàn)圖片縮放、翻轉(zhuǎn)、顏色漸變的代碼示例
這篇文章主要介紹了HTML5 Canvas實現(xiàn)圖片縮放、翻轉(zhuǎn)、顏色漸變的代碼示例,充分利用到了坐標的操作,說明都寫在代碼注釋里了很簡明,需要的朋友可以參考下2016-02-28
HTML5 Canvas制作的花朵生成器可動態(tài)生成各種顏色的花朵
一款利用HTML5 Canvas制作的花朵生成器2014-05-28
js HTML5 Canvas線性圖表插件可以繪制不同的顏色
一款用的HTML5線性圖表插件，這款線性圖表可以在不同的數(shù)據(jù)區(qū)域內(nèi)繪制不同的顏色2014-04-24html5 Canvas畫圖教程(2)—畫直線與設置線條的樣式如顏色/端點/交匯點
在學畫畫的時候，線條是最基本的了，而線條的連接可以組成任何圖形。在Canvas中也是如此,接下來為您詳細介紹最簡單的線條的畫法2013-01-09
HTML5 canvas實現(xiàn)漸變色圓形進度條特效源碼
HTML5 canvas實現(xiàn)漸變色圓形進度條動畫是一款帶漸變色的圓形進度條動畫特效jQuery插件jquery-circle-progress，進度條使用漸變色來填充2016-02-16
html5使用canvas實現(xiàn)的圓形漸變進度條加載動畫特效源碼
這是一款基于html5使用canvas實現(xiàn)的圓形漸變進度條加載動畫特效源碼，圓形漸變動畫呈現(xiàn)動態(tài)變換效果?；赾anvas實現(xiàn)2015-12-22使用javascript和HTML5 Canvas畫的四漸變色播放按鈕效果
這篇文章主要介紹了使用javascript和HTML5 Canvas畫的四漸變色播放按鈕效果,需要的朋友可以參考下2014-04-10html5 Canvas畫圖教程(4)—未閉合的路徑及漸變色的填充方法
一般繪圖的方式有兩種，即填充和描邊，前面的文章已經(jīng)講了描邊的方法stroke，本文就講一下Canvas中填充圖形的方法2013-01-09HTML5 Canvas如何實現(xiàn)紋理填充與描邊(Fill And Stroke)
本文為大家詳細介紹下HTML5 Canvas Fill 與Stroke文字效果，基于Canvas如何實現(xiàn)紋理填充與描邊、顏色填充與描邊，具體代碼如下，感興趣的朋友可以參考下哈，希望對大家有所2013-07-15- 這篇文章主要介紹了HTML5 Canvas的常用線條屬性值總結(jié),包括對lineCap屬性、lineJoin屬性、線寬和筆觸樣式四種屬性的各種值的實例講解,整理得非常給力,需要的朋友可以參考下2016-03-17
