HTML5邊玩邊學（4）：變幻的色彩

作者: 左洸來源: 博客園發布時間: 2010-10-09 18:01 閱讀: 1397 次推薦: 1 原文鏈接 [收藏]

　　在上一節HTML5 邊玩邊學（3）：像素和顏色中我們講了顏色和像素是怎么回事，其實大多數情況下，我們用不到像素級別的操作，我們只需要對顏色進行整體設置就行了。

　　一、基本顏色

　　在HTML5 邊玩邊學（2）：基礎繪圖中，我們提到過有兩個上下文屬性可以用來設置顏色：

　　strokeStyle 決定了你當前要繪制的線條的顏色

　　fillStyle 決定了你當前要填充的區域的顏色

　　顏色值只要是符合CSS3 顏色值標準的有效字符串都可以。下面的例子都表示同一種顏色。例如：

//這些 fillStyle 的值均為'橙色'，ctx是上下文對象
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

　　下面我們給出一個簡單的例子，分別繪制了36個實心圓和36個空心圓，在給他們設置顏色的時候就分別用到了 strokeStyle 和 fillStyle 代碼如下：

<canvas id="canvas1" width="150" height="150" style=" background-color: black">
你的瀏覽器不支持 <canvas>標簽，請使用 Chrome 瀏覽器或者 FireFox 瀏覽器
</canvas><br/>
<input type="button" value="fillStyle" onclick="fillStyle();" />
<input type="button" value="strokeStyle" onclick="strokeStyle();" />

<script type="text/javascript">
function fillStyle() {
//獲取上下文對象
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
//清空畫布
ctx.clearRect(0,0,150,150);
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
//設置填充色，循環參數 i,j 控制顏色的該變量
ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +Math.floor(255-42.5*j) + ',0)';
//準備畫
ctx.beginPath();
//畫圓輪廓，循環參數 i,j 控制圓心的位置
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
//填充并顯示
ctx.fill();
}
}
}

function strokeStyle() {
//獲取上下文對象
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
//清空畫布
ctx.clearRect(0,0,150,150);
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
//設置線條顏色，循環參數 i,j 控制顏色的該變量
ctx.strokeStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +Math.floor(255-42.5*j) + ',0)';
//準備畫
ctx.beginPath();
//畫圓輪廓，循環參數 i,j 控制圓心的位置
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
//上屏顯示
ctx.stroke()
}
}
}
</script>

　　二、透明度 Transparency

　　在第三節HTML5邊玩邊學（3）：像素和顏色中講過，一個像素的顏色值由四個字節組成，第四個字節一般用不到，但是當你需要設置透明度的時候就需要第四個字節了。

　　一般情況下我們用RGB格式來設置一個顏色，比如："rgb(0,0,255)" 表示一個純藍色，考慮透明度的時候，我們就用RGBA格式來設置一個顏色，比如："rgba(0,0,255,0.5)" 表示一個透明度為0.5的純藍色。字母 a 即表示顏色的透明度，好像也叫顏色的 Alpha 值，范圍為：0-1，0代表完全透明，1代表完全不透明。下面的例子分別設置了五種不同的透明度來繪制藍色矩形：

<canvas id="canvas2" width="150" height="150" style="background-position: center center;background-image:url(http://images.cnblogs.com/cnblogs_com/myqiao/262115/r_2204793492575248335.jpg)">
你的瀏覽器不支持 <canvas>標簽，請使用 Chrome 瀏覽器或者 FireFox 瀏覽器
</canvas><br/>
顏色透明度：<input type="button" value="0" onclick="alphaTest1(0);" />
<input type="button" value="0.2" onclick="alphaTest1(0.2);" />
<input type="button" value="0.4" onclick="alphaTest1(0.4);" />
<input type="button" value="0.6" onclick="alphaTest1(0.6);" />
<input type="button" value="0.8" onclick="alphaTest1(0.8);" />
<input type="button" value="1" onclick="alphaTest1(1);" />

<script type="text/javascript">
function alphaTest1(alpah) {
//獲取上下文對象
var canvas = document.getElementById("canvas2");
var ctx = canvas.getContext("2d");
//清空畫布
ctx.clearRect(0,0,150,150);
//設置有透明度的藍色
ctx.fillStyle="rgba(0,0,255,"+alpah+")"
ctx.fillRect(20, 20, 110, 110)
}
</script>

　　上下文對象還有一個控制透明度的屬性： globalAlpha ，這個屬性用來控制全局透明度。當你設置好這個屬性以后，后面繪制的一系列圖形都采用同樣的透明度，你只需要設置顏色即可，見下面的例子：

<canvas id="canvas3" width="150" height="150" style="background-position: center center;background-image:url(http://images.cnblogs.com/cnblogs_com/myqiao/262115/r_2204793492575248335.jpg)">
你的瀏覽器不支持 <canvas>標簽，請使用 Chrome 瀏覽器或者 FireFox 瀏覽器
</canvas><br/>
全局透明度：<input type="button" value="0" onclick="alphaTest2(0);" />
<input type="button" value="0.2" onclick="alphaTest2(0.2);" />
<input type="button" value="0.4" onclick="alphaTest2(0.4);" />
<input type="button" value="0.6" onclick="alphaTest2(0.6);" />
<input type="button" value="0.8" onclick="alphaTest2(0.8);" />
<input type="button" value="1" onclick="alphaTest2(1);" />

<script type="text/javascript">
function alphaTest2(alpah){
//獲取上下文對象
var canvas = document.getElementById("canvas3");
var ctx = canvas.getContext("2d");
//清空畫布
ctx.clearRect(0,0,150,150);
//設置全局透明度
ctx.globalAlpha=alpah
//繪制各種顏色的形狀
ctx.fillStyle="red"
ctx.fillRect(10, 10, 30, 30)
ctx.fillStyle="green"
ctx.fillRect(10, 50, 30, 30)
ctx.fillStyle="blue"
ctx.fillRect(10, 90, 30, 30)
ctx.fillStyle="yellow"
ctx.beginPath()
ctx.arc(100, 75, 40, 0, 360)
ctx.fill()
}
</script>

　　三、漸變色 Gradients

　　上下文對象有兩個方法可以創建一個叫做 canvasGradient 的對象，并用它設置 fillStyle 或 strokeStyle 屬性，繪制出來的圖形就有漸變效果了：

　　createLinearGradient(x1,y1,x2,y2)

　　創建線性漸變：接受 4 個參數，表示漸變的起點 (x1,y1) 與終點 (x2,y2)。

　　createRadialGradient(x1,y1,r1,x2,y2,r2)

　　創建徑向漸變，接受 6 個參數，前三個定義一個以 (x1,y1) 為原點，半徑為 r1 的圓，后三個參數則定義另一個以 (x2,y2) 為原點，半徑為 r2 的圓。創建出 canvasGradient 對象后，我們可以用 addColorStop 方法設置過渡的中間色標，如下：

　　addColorStop(position, color)

　　position 參數必須是一個 0.0 與 1.0 之間的數值，表示過渡顏色所在位置。下面的例子給出了四個線性漸變和兩個徑向漸變，大家可以看看代碼有什么不同：

<canvas id="canvas4" width="150" height="150" style=" background-color: black">
你的瀏覽器不支持 <canvas>標簽，請使用 Chrome 瀏覽器或者 FireFox 瀏覽器
</canvas><br/>
漸變：<input type="button" value="橫向漸變" onclick="gradients1();" />
<input type="button" value="縱向漸變" onclick="gradients2();" />
<input type="button" value="斜向漸變" onclick="gradients3();" />
<input type="button" value="突變" onclick="gradients4();" />
<input type="button" value="徑向漸變" onclick="gradients5();" />
<input type="button" value="偏心徑向漸變" onclick="gradients6();" />

<script type="text/javascript">
function gradients1() {
var ctx = document.getElementById('canvas4').getContext('2d');
//清空畫布
ctx.clearRect(0,0,150,150);
//創建橫向漸變對象
var lingrad = ctx.createLinearGradient(0,0,150,0);
//添加色標
lingrad.addColorStop(0, 'blue');
lingrad.addColorStop(0.5, 'green');
lingrad.addColorStop(1, 'white');
ctx.fillStyle = lingrad;
ctx.fillRect(10,10,130,130);
}
function gradients2() {
var ctx = document.getElementById('canvas4').getContext('2d');
//清空畫布
ctx.clearRect(0,0,150,150);
//創建縱向漸變對象
var lingrad = ctx.createLinearGradient(0,0,0,150);
//添加色標
lingrad.addColorStop(0, 'blue');
lingrad.addColorStop(0.4, 'green');
lingrad.addColorStop(1, 'white');
ctx.fillStyle = lingrad;
ctx.fillRect(10,10,130,130);
}
function gradients3() {
var ctx = document.getElementById('canvas4').getContext('2d');
//清空畫布
ctx.clearRect(0,0,150,150);
//創建縱向漸變對象
var lingrad = ctx.createLinearGradient(0,0,150,150);
lingrad.addColorStop(0, 'blue');
lingrad.addColorStop(0.5, 'green');
lingrad.addColorStop(1, 'white');
ctx.fillStyle = lingrad;
ctx.fillRect(10,10,130,130);
}
function gradients4() {
var ctx = document.getElementById('canvas4').getContext('2d');
//清空畫布
ctx.clearRect(0,0,150,150);
//創建斜向漸變對象
var lingrad = ctx.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, 'blue');
lingrad.addColorStop(0.5, 'white');
lingrad.addColorStop(0.5, 'green');
lingrad.addColorStop(1, 'white');
ctx.fillStyle = lingrad;
ctx.fillRect(10,10,130,130);
}
function gradients5() {
var ctx = document.getElementById('canvas4').getContext('2d');
//清空畫布
ctx.clearRect(0,0,150,150);
//創建徑向漸變對象
var lingrad = ctx.createRadialGradient(75,75,10,75,75,70);
lingrad.addColorStop(0, 'white');
lingrad.addColorStop(1, 'rgba(255,255,255,0)');
ctx.fillStyle = lingrad;
ctx.arc(75, 75, 70, 0, 360);
ctx.fill();
}
function gradients6() {
var ctx = document.getElementById('canvas4').getContext('2d');
//清空畫布
ctx.clearRect(0,0,150,150);
//創建偏心徑向漸變對象
var lingrad = ctx.createRadialGradient(5,5,10,75,75,70);
lingrad.addColorStop(0, 'white');
lingrad.addColorStop(1, 'rgba(255,255,255,0)');
ctx.fillStyle = lingrad;
ctx.arc(75, 75, 70, 0, 360);
ctx.fill();
}
</script>

　　四、陰影

　　上下文對象有四個屬性來設置陰影，分別是：

shadowOffsetX = float
shadowOffsetY = float
shadowBlur = float
shadowColor = color

　　shadowOffsetX 和 shadowOffsetY 用來設定陰影在 X 和 Y 軸的延伸距離。負值表示陰影會往上或左延伸，正值則表示會往下或右延伸，他們默認都是 0。

　　shadowBlur 用于設定陰影的模糊程度，默認為 0。

　　shadowColor 用于設定陰影效果的延伸，值可以是標準的 CSS 顏色值，默認是全透明的黑色。

　　下面的例子是分別顯示一個帶陰影的矩形，一個帶陰影的文本，代碼如下：

<canvas id="canvas5" width="150" height="150" style=" background-color: black">
你的瀏覽器不支持 <canvas>標簽，請使用 Chrome 瀏覽器或者 FireFox 瀏覽器
</canvas><br/>
<input type="button" value="圖形陰影" onclick="shadow1();" />
<input type="button" value="文字陰影" onclick="shadow2();" />

<script type="text/javascript">
function shadow1() {
var ctx = document.getElementById('canvas5').getContext('2d');
//清空畫布
ctx.clearRect(0,0,150,150);
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 4;
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 130, 130);
}

function shadow2() {
var ctx = document.getElementById('canvas5').getContext('2d');
//清空畫布
ctx.clearRect(0,0,150,150);
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(255, 255, 255, 0.5)";

ctx.font = "20px Times New Roman";
ctx.fillStyle = "red";
ctx.fillText("Sample String", 15, 70);
}
</script>