本篇主要講，html5 canvas中圖形的填充（filling）功能應用，主要包括基本顏色定義（Basic Colors）、漸變（Gradient）、圖案（Pattern）、陰影（Shadow）；
先貼一個以下所有涉及到的實現運行的基本代碼段：
Base Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="modernizr-latest.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
var Debugger = function() {};
Debugger.log = function(message) {
try {
console.log(message);
} catch (exception) {
return;
}
}
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport() {
return Modernizr.canvas;
}
function canvasApp() {
//是否支持CANVAS判斷
if(!canvasSupport()) {
return;
}
//取Canvasvar
theCanvas = document.getElementById("canvasOne");
//獲取繪圖環境context
var context = theCanvas.getContext("2d");
//繪圖方法的實現
function drawScreen() {}
//繪圖方法調用執行
drawScreen();
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px; border:1px solid #0000ff">
<canvas id="canvasOne" width="550" height="400">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
以下所有實例代碼，只要把上面的function drawScreen()替換掉即可！
Basic Colors 基本顏色
html5 中支持用字符串來代替RGB值的顏色主要有Basic Colors：
black = #000000 green = #008000 silver = #C0C0C0 lime=#00FF00
gray = #808080 olive = #808000 white = #FFFFFF yellow = #FFFF00
maroon = #800000 navy = #000080 red = #FF0000 blue = #0000FF
purple = #800080 teal = #008080 fuchsia = #FF00FF aqua = #00FFFF
例如：context.fillStyle="#000000"; 或者context.fillStyle="black";
context.strokeStyle="#COCOCO"; 或者context.strokeStyle="silver";
Gradient 漸變
Gradient主要有兩種：Linear gradients線型漸變、Radial gradients徑向漸變；
線型漸變包括有Linear horizontal gradients水平漸變、Vertical gradients垂直漸變、Diagonal gradients對角線漸變；
水平漸變（Linear horizontal gradient）
function drawScreen()
{
var linearGradient=context.createLinearGradient(0,0,60,0);
linearGradient.addColorStop(0,'rgb(255,0,0)');
linearGradient.addColorStop(0.5,'rgb(0,255,0)');
linearGradient.addColorStop(1,'rgb(0,0,255)');
context.fillStyle=linearGradient;
context.fillRect(0, 0,30,40);
context.fillRect(0, 40,60,40);
context.fillRect(0, 80,90,40);
context.fillRect(0, 120,120,40);
context.fillRect(25, 160,150,40);
}
實例效果：
context.createLinearGradient(x1,y1,x2,y2)該方法用於創建線向漸變對象，包括四個參數：漸變起始點的坐標（x1,y1）,漸變結束點的坐標(x2,y2);
在上在例子中，.createLinearGradient(0,0,100,0);兩個點的Y坐標都是0，表示是水平漸變；
若是.createLinearGradient(0,0,0,100);兩個點的X坐標都是0，Y坐標在發生變化，則表示為垂直漸變；
若是.createLinearGradient(0,0,100,100);同表示對角線線向漸變；
.addColorStop(position,'rgb')該方法是為漸變添加顏色；包括二個參數：代表顏色要使用的位置（position），第二個代表顏色的rgb值；
其中，position值的范圍是[0.0---1.0],我們可以理解為定義的漸變范圍的一個百分比表示；
context.fillStyle用來設置填充顏色或者漸變風格；
Linear gradient漸變也可用於描邊時使用，設置線框的風格即可：strokeStyle
水平漸變 邊框
function drawScreen() {
var linearGradient = context.createLinearGradient(0, 0, 60, 0);
linearGradient.addColorStop(0,'rgb(255,0,0)');
linearGradient.addColorStop(.5,'rgb(0,255,0)');
linearGradient.addColorStop(1,'rgb(0,0,255)');
context.strokeStyle = linearGradient;
context.strokeRect(0, 0,60,60);
}
徑向漸變Radial gradients
徑向漸變能過contect.createRadialGradient(x1,y1,radius1,x2,y2,radius2)來創建;
包括6個參數：兩個圓的參數，第一個圓的圓心（x1,y1）,半徑radius1;第二個圓的圓心（x2,y2）,半徑radius2;
Radial gradients
function drawScreen() {
var radialGradient = context.createRadialGradient(70, 70, 10,100,100,70);
radialGradient.addColorStop(0,'rgb(255,0,0)');
radialGradient.addColorStop(.5,'rgb(0,255,0)');
radialGradient.addColorStop(1,'rgb(0,0,255)');
context.fillStyle = radialGradient;
context.fillRect(0, 0,200,200);
}
實例效果：
創建radial gradient漸變時，兩個圓點也可以相同，大家自己試試效果。。嘿嘿！
radial gradient漸變也可用於描邊時使用，設置線框的風格即可：strokeStyle
Pattern 圖案
用圖案填充形狀，就是用圖片來填充圖形；
通過context.createPattern(image,repeat)來實現，兩個參數，分別代表：圖片實例、第二個是個字符串類型的，指是否重復；
repeat主要包含四個選項：repeat、repeat-x、repeat-y、no-repeat
Pattern
function drawScreen() {
var fillImg = new Image();
fillImg.src = 'pattern.png';
fillImg.onload = function(){
var fillPattern = context.createPattern(fillImg,'repeat');
context.fillStyle = fillPattern;
context.fillRect(0,0,500,200);
}
}
實例效果(實例中包含的一上圖片”pattern.png“
)：
其它的重復效果，大家自己試試，嘿嘿…………
Shadow投影效果
給圖形添加投影效果。先看看實例吧；
Shadow
function drawScreen() {
context.fillStyle = 'red';
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = 'black';
context.shadowBlur = 10;
context.fillRect(10,10,400,100);
}
Shadow主要用於四個屬性：
context.shadowOffsetX ：代表投影在X方向的偏移量，向正負分別代表，向右向左；大小代表偏移值；
context.shadowOffsetY ：代表投影在Y方向的偏移量，向正負分別代表，向下向上；大小代表偏移值；
context.shadowBlur ：代表投影模糊效果的大小
context.shadowColor:代表投影的顏色，rgb值（"black"\"#000000"\"rgb(0,0,0)"）；
OK, 關於在Canvas上進行Draw Shape已全部寫完，歡迎交流學習！！！
下一篇，我們將進行html5 canvas text api學習，敬請期待…………
祝大家龍年吉祥！！！