上一篇博客中，我們討論了canvas的一些基本的繪制路徑API，我們可以用這些API繪制想要的形狀。而在這里，我們將會給這些形狀添加樣式。這些樣式包括：色彩，透明度，線型，漸變，圖案樣式，陰影，填充。

1.色彩Colors

在用fill()方法和stroke()方法時，我們可以用fillStyle和strokeStyle設置填充和邊框的顏色：

• fillStyle = “color” 設置圖形的填充顏色。

• strokeStyle=“color” 設置圖形輪廓的顏色。

注意: 一旦設置了 strokeStyle 或者 fillStyle 的值，那么這個新值就會成為新繪制的圖形的默認值。如果要給每個圖形上不同的顏色，需要重新設置 fillStyle 或 strokeStyle 的值。

fillStyle和strokeStyle示例

function draw_rect() {var canvas=document.getElementById("canvas");if(canvas.getContext){var ctx=canvas.getContext('2d');for(var i=0;i<7;i++){for(var j=0;j<7;j++){ctx.beginPath();ctx.fillStyle="rgb("+Math.floor(255-32*i)+","+Math.floor(255-32*j)+",0)";ctx.fillRect(j*25,i*25,25,25);}}} } function draw_arc() {var canvas=document.getElementById("canvas");if(canvas.getContext){var ctx=canvas.getContext('2d');for(var i=0;i<3;i++){for(var j=0;j<3;j++){ctx.beginPath();ctx.strokeStyle="rgb(0,"+Math.floor(255-50*i)+","+Math.floor(255-50*j)+")";ctx.arc(300+i*60,25+65*j,20,0,Math.PI*2,true);ctx.stroke();}}} }

2.透明度Transparency

我們在繪制圖形時也可以給填充和輪廓設置透明度，而透明度的設置可以通過globalAlpha或直接用rgba函數：

• globalAlpha使用方法：

globalAlpha = transparencyValue 如 globalAlpha = 0.2;

• rgba使用方法：

ctx.fillStyle="rgba(255,0,0,0.2); ctx.strokeStyle='rgba(255,0,0,0.2);

注意：

• 不透明度有效范圍是從 0.0（完全透明）到 1.0（完全不透明）。
• globalAlpha 屬性在需要繪制大量擁有相同透明度的圖形時候相當高效。但是實際使用過程中rgba函數可能更加實用。

globalAlpha示例

function draw_globalAlpha() {var canvas=document.getElementById("canvas");if(canvas.getContext){var ctx=canvas.getContext('2d');ctx.beginPath();ctx.arc(200,200,100,0,-Math.PI/2,true);ctx.lineTo(200,200);ctx.fillStyle='#F30';ctx.fill(); ctx.beginPath();ctx.arc(200,200,100,-Math.PI/2,-Math.PI,true);ctx.fillStyle='#FD0';ctx.lineTo(200,200);ctx.fill();ctx.beginPath();ctx.arc(200,200,100,-Math.PI,Math.PI/2,true);ctx.lineTo(200,200);ctx.fillStyle='#6C0';ctx.fill();ctx.beginPath();ctx.arc(200,200,100,Math.PI/2,0,true);ctx.lineTo(200,200);ctx.fillStyle='#09F';ctx.fill();for(var i=0;i<10;i++){ctx.beginPath();ctx.arc(200,200,i*10+10,Math.PI*2,0,true);ctx.globalAlpha=0.2;ctx.strokeStyle="#FFF";ctx.stroke();}ctx.globalAlpha=1;ctx.beginPath();ctx.arc(480,200,100,0,-Math.PI/2,true);ctx.lineTo(480,200);ctx.fillStyle='#F30';ctx.fill(); ctx.beginPath();ctx.arc(480,200,100,-Math.PI/2,-Math.PI,true);ctx.fillStyle='#FD0';ctx.lineTo(480,200);ctx.fill();ctx.beginPath();ctx.arc(480,200,100,-Math.PI,Math.PI/2,true);ctx.lineTo(480,200);ctx.fillStyle='#6C0';ctx.fill();ctx.beginPath();ctx.arc(480,200,100,Math.PI/2,0,true);ctx.lineTo(480,200);ctx.fillStyle='#09F';ctx.fill();for(var i=0;i<10;i++){ctx.beginPath();ctx.arc(480,200,i*10+10,Math.PI*2,0,true);ctx.globalAlpha=0.15;ctx.fillStyle="#FFF";ctx.fill();}} }

rgba（）示例

function draw_rgba() {var canvas=document.getElementById("canvas");if(canvas.getContext){var ctx=canvas.getContext('2d');ctx.globalAlpha=1;ctx.fillStyle="rgb(255,221,0)";ctx.fillRect(120,400,150,37.5);ctx.fillStyle="rgb(102,204,0)";ctx.fillRect(120,437.5,150,37.5);ctx.fillStyle="rgb(0,153,255)";ctx.fillRect(120,475,150,37.5);ctx.fillStyle="rgb(255,51,0)";ctx.fillRect(120,512.5,150,37.5); for(var i=0;i<10;i++){ctx.fillStyle="rgba(255,255,255,"+(i+1)/10+")";for(var j=0;j<4;j++){ctx.fillRect(125+14*i,405+37.5*j,14,27.5)}}}}

3.線型Line styles

線型是輪廓或者lineTo方法的重要屬性，line的屬性包括：

• lineWidth = value設置線條寬度
• lineCap = type設置線條末端樣式。
• lineJoin = type設定線條與線條間接合處的樣式。
• miterLimit = value限制當兩條線相交時交接處最大長度；所謂交接處長度（斜接長度）是指線條交接處內角頂點到外角頂點的長度。
• getLineDash()返回一個包含當前虛線樣式，長度為非負偶數的數組。
• setLineDash(segments)設置當前虛線樣式。
• lineDashOffset = value設置虛線樣式的起始偏移量。
  下面我們來介紹這些屬性方法：

（1）lineWidth線寬屬性

當前前繪線的粗細。屬性值必須為正數，默認值是1.0。

function draw_lineWidth()//線寬 {var canvas=document.getElementById("canvas");if(canvas.getContext){var ctx=canvas.getContext('2d');for(var i=0;i<10;i++){ctx.lineWidth=i+1;ctx.beginPath();ctx.moveTo(5+i*14,5);ctx.lineTo(5+i*14,140);ctx.stroke();} } }

（2）lineCap端點樣式

屬性 lineCap 的值決定當前線段端點顯示樣式，取值有三：

• butt 默認方形樣式
• round 圓形樣式
• square 突出方形樣式

function draw_lineCap()//端點樣式 {var canvas=document.getElementById("canvas");var lineCap=["butt","round","square"];if(canvas.getContext){var ctx=canvas.getContext('2d');ctx.strokeStyle="#09f";ctx.beginPath();ctx.moveTo(10,10);ctx.lineTo(140,10);ctx.moveTo(10,140);ctx.lineTo(140,140);ctx.stroke();for(var i=0;i<3;i++){ctx.lineWidth=15;//線寬ctx.lineCap=lineCap[i];//端點樣式ctx.beginPath();ctx.moveTo(25+i*50,10);ctx.lineTo(25+i*50,140);ctx.stroke();}} }

（3）lineJoin連接樣式

屬性 lineJoin 的值決定當前線段連接處顯示樣式，取值有三：

• miter 默認方形樣式
• round 圓形樣式
• bevel 斜角樣式

function draw_lineJoin()//連接樣式 {var canvas=document.getElementById("canvas");if(canvas.getContext){var ctx=canvas.getContext('2d');var lineJoin=["round","bevel","miter"];for(var i=0;i<3;i++){ctx.lineWidth=15;//線寬ctx.lineJoin=lineJoin[i];//鏈接樣式ctx.beginPath();ctx.moveTo(10,50+50*i);ctx.lineTo(60,50*i+100);ctx.lineTo(110,50*i+50);5ctx.stroke();}} }

（4）虛線setLineDash和lineDashOffset

對于stroke輪廓，我們除了可以給他設置顏色，粗細，端點，連接外，還能設置他的虛實，而虛線的設置主要由兩部分組成：

• setLineDash 設置實線與間隙的占比，接受一個數組
• lineDashOffset 設置虛線的起始偏移量

lineDash示例

function draw() {var canvas=document.getElementById("canvas");var ctx=canvas.getContext('2d');ctx.clearRect(0,0, canvas.width, canvas.height);ctx.setLineDash([5, 2]);//線段和間隙交替ctx.lineDashOffset = -offset;//起始偏移量ctx.strokeRect(10,10, 400, 300); } function march() {offset++;if (offset > 16) {offset = 0;}draw();setTimeout(march, 20); }

先設置虛線的樣式，然后再用虛線畫出矩形，結合遞歸函數就能社指出動畫：

4.漸變Gradients

就好像一般的繪圖軟件一樣，我們可以用線性或者徑向的漸變來填充或描邊。我們用下面的方法新建一個 canvasGradient 對象，并且賦給圖形的 fillStyle 或 strokeStyle 屬性。

（1）創建漸變對象：

• createLinearGradient(x1,y1,x2,y2) 線性漸變，（x1，y1）表示漸變的起點，（x2，y2）表示漸變的終點
• createRadialGradient(x1,y1,r1,x2,y2,r2) 圓形漸變，(x1,x2,r1)確定一個起點圓，(x2,y2,r2)確定一個終點圓
• 使用方法：

var linearGradient=ctx.createLinearGradient(0,0,100,100);線性漸變對象 var radialGradient=ctx.createRadialGradient(45,45,0,45,45,30);//圓形漸變對象

（2）給對象上色addColorStop

• gradient.addColorStop（position,color）方法接受兩個參數，position在0~1之間，表示漸變時對于模型的相對位置，color則是一個顏色字符串。
• 使用方法：

linearGradient.addColorStop(0.5,"rgb(255,255,0)");//在線性漸變對象的中部設置漸變色為rgb

createLinearGradient

function draw_linear() {var ctx = document.getElementById('canvas').getContext('2d');// Create gradientsvar lingrad = ctx.createLinearGradient(0,0,0,150);lingrad.addColorStop(0, '#00ABEB');lingrad.addColorStop(0.5, '#fff');lingrad.addColorStop(1, '#26C000');var lingrad2 = ctx.createLinearGradient(0,50,0,95);lingrad2.addColorStop(0.5, '#000');lingrad2.addColorStop(1, 'rgba(0,0,0,0)');// assign gradients to fill and stroke stylesctx.fillStyle = lingrad;//屬性值賦給fillStylectx.strokeStyle = lingrad2;//屬性值賦給stroke// draw shapesctx.fillRect(10,10,130,130);ctx.beginPath();ctx.arc(75,75,40,0,2*Math.PI,true);ctx.stroke(); }

createRadialGradient

圓形漸變可以制作一個具有3D效果的小球，只需要我們將漸變起點和漸變終點稍微錯位，就能達到這樣的效果：

function draw_radia() {var ctx=document.getElementById("canvas").getContext('2d');var radgrad1=ctx.createRadialGradient(100,100,20,110,115,50);radgrad1.addColorStop(0, "#CDCD9A");radgrad1.addColorStop(0.9,"#808040");radgrad1.addColorStop(1,"rgb(97,97,48,0)");var radgrad2=ctx.createRadialGradient(200,100,10,205,108,30);radgrad2.addColorStop(0, "#ACD6FF");radgrad2.addColorStop(0.8,"#005AB5");radgrad2.addColorStop(1,"rgb(0,0,121,0)");var radgrad3=ctx.createRadialGradient(200,40,5,204,45,20);radgrad3.addColorStop(0, " #CAFFFF");radgrad3.addColorStop(0.85,"#00CACA");radgrad3.addColorStop(1,"rgb(0,62,62,0)");ctx.fillStyle=radgrad1;ctx.beginPath();ctx.fillRect(0,0,1000,800);ctx.fillStyle=radgrad2;ctx.beginPath();ctx.fillRect(0,0,1000,800);ctx.fillStyle=radgrad3;ctx.beginPath();ctx.fillRect(0,0,1000,800);ctx.fillStyle="rgba(0,0,0,0.2)";ctx.fillRect(0,0,1000,800); }

注意，這里的漸變是對于整個canvas對象來說的，所以如果addColorStop的邊界1處未設置透明，將會使得整個區域都是漸變色.

5.圖案樣式 Patterns

在創建canvas畫布時是否可以將圖片設置為畫布的背景？實際上我們完全可以用CSS的方法設置background-img來實現。在HTML5中的canvas畫布也提供了圖案樣式API，我們首先用img方法獲取圖片（在使用圖片之前要先確認圖片加載完畢），然后用createPattern(image, type)方法創建圖案對象，再將對象賦值給fillStyle，我們就能用繪圖API繪制圖形了。

• Image() 創建一個Image()對象
• createPattern(image, type)創建一個圖案對象，該方法接受兩個參數。Image 可以是一個 Image 對象的引用，或者另一個 canvas 對象。Type 必須是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。

createPattern實例：

function draw() {var canvas=document.getElementById("canvas");if(canvas.getContext){var ctx=canvas.getContext('2d');var img=new Image();img.src="spiderMan.jpg";img.onload=function(){var ptrn=ctx.createPattern(img,'repeat');ctx.fillStyle=ptrn;ctx.fillRect(0,0,400,300);ctx.beginPath();ctx.arc(600,200,100,0,-2*Math.PI,true);ctx.fill();}} }

6.陰影 Shadows

文字陰影

文字陰影相比已經不足為奇，在CSS3中的text-shadow屬性可以設置2D的陰影，在HTML5中canvas也提供了這樣的API

• shadowOffsetX = float shadowOffsetX 和 shadowOffsetY 用來設定陰影在 X 和 Y 軸的延伸距離，它們是不受變換矩陣所影響的。負值表示陰影會往上或左延伸，正值則表示會往下或右延伸，它們默認都為 0。
• shadowOffsetY = float shadowOffsetX 和 shadowOffsetY 用來設定陰影在 X 和 Y 軸的延伸距離，它們是不受變換矩陣所影響的。負值表示陰影會往上或左延伸，正值則表示會往下或右延伸，它們默認都為 0。
• shadowBlur = float shadowBlur 用于設定陰影的模糊程度，其數值并不跟像素數量掛鉤，也不受變換矩陣的影響，默認為 0。
• shadowColor = color shadowColor 是標準的 CSS 顏色值，用于設定陰影顏色效果，默認是全透明的黑色。
  這和CSS3的text-shadow有異曲同工之妙，這里不再贅述

function draw() {var ctx = document.getElementById('canvas').getContext('2d');ctx.shadowOffsetX = 2;ctx.shadowOffsetY = 2;ctx.shadowBlur = 2;ctx.shadowColor = "rgba(0, 0, 0, 0.5)";ctx.font = "20px Times New Roman";ctx.fillStyle = "Black";ctx.fillText("Sample String", 5, 30); }

7.Canvas 填充規則

當我們用到 fill（或者 clip和isPointinPath ）你可以選擇一個填充規則，該填充規則根據某處在路徑的外面或者里面來決定該處是否被填充，這對于自己與自己路徑相交或者路徑被嵌套的時候是有用的。

兩個可能的值：

• “nonzero”: non-zero winding rule, 默認值.

• “evenodd”: even-odd winding rule.

這個例子，我們用填充規則 evenodd

function draw() {var ctx = document.getElementById('canvas').getContext('2d'); ctx.beginPath(); ctx.arc(50, 50, 30, 0, Math.PI*2, true);ctx.arc(50, 50, 15, 0, Math.PI*2, true);ctx.fill("evenodd"); }

總結

以上是生活随笔為你收集整理的HTML5 canvas样式和颜色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。