Canvas入門基礎(chǔ)（二）：顏色、樣式和陰影

fillStyle = color

strokeStyle = color

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

例子：

for (var i=1;i<6;i++){
    for (var j=1;j<6;j++){
      cxt.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +  Math.floor(255-42.5*j) + ',0)';
      cxt.fillRect(j*25,i*25,25,25);
    }
  }

二、線型的樣式

• 設(shè)置線條寬度。
  

lineWidth = value

例子：

cxt.strokeStyle="#e78170";
for (var i = 0; i < 10; i++){
   cxt.lineWidth = 1+i;
   cxt.beginPath();
   cxt.moveTo(25+i*14,25);
   cxt.lineTo(25+i*14,140);
   cxt.stroke();
 }

• 設(shè)置線條末端樣式。
  

有三個值：

butt 線段末端以方形結(jié)束。 round 線段末端以圓形結(jié)束。 square 線段末端以方形結(jié)束，但是增加了一個寬度和線段相同，高度是線段厚度一半的矩形區(qū)域。

• 設(shè)定線條與線條間接合處的樣式。
  

此屬性有3個值： round, bevel and miter。默認(rèn)值是 miter。注意：如果2個相連部分在同一方向，那么lineJoin不會產(chǎn)生任何效果，因為在那種情況下不會出現(xiàn)連接區(qū)域。 round 通過填充一個額外的，圓心在相連部分末端的扇形，繪制拐角的形狀。 圓角的半徑是線段的寬度。 bevel 在相連部分的末端填充一個額外的以三角形為底的區(qū)域， 每個部分都有各自獨(dú)立的矩形拐角。 miter 通過延伸相連部分的外邊緣，使其相交于一點(diǎn)，形成一個額外的菱形區(qū)域。這個設(shè)置可以通過 miterLimit 屬性看到效果

• 限制當(dāng)兩條線相交時交接處最大長度；所謂交接處長度（斜接長度）是指線條交接處內(nèi)角頂點(diǎn)到外角頂點(diǎn)的長度。
  

• 返回一個包含當(dāng)前虛線樣式，長度為非負(fù)偶數(shù)的數(shù)組。
  

• 設(shè)置當(dāng)前虛線樣式。
  

• 設(shè)置虛線樣式的起始偏移量。
  

三、漸變Gradients

我們還可以用線性或者徑向的漸變來填充或描邊

• 線性漸變
  

createLinearGradient(x1, y1, x2, y2) createLinearGradient 方法接受 4 個參數(shù)，表示漸變的起點(diǎn) (x1,y1) 與終點(diǎn) (x2,y2)。

• 徑向漸變
  

創(chuàng)建出 canvasGradient 對象后，我們就可以用 addColorStop 方法給它上色了。

• gradient.addColorStop(position, color)
  

var linearGradient=cxt.createLinearGradient(50,50,250,250);
  linearGradient.addColorStop(0,'yellow');
  linearGradient.addColorStop(.5,'red');
  linearGradient.addColorStop(1,'green');
  cxt.fillStyle=linearGradient;
  cxt.fillRect(50,50,200,200);

從上圖看，（50,50）是漸變的起點(diǎn)，（250，250）是漸變的終點(diǎn)，而連接這兩點(diǎn)的白線，就是漸變的方向。

徑向漸變

同心漸變

var rr=cxt.createRadialGradient(100,100,40,100,100,100);
  rr.addColorStop(0,'red');
  rr.addColorStop(.5,'yellow');
  rr.addColorStop(1,'blue');
  cxt.fillStyle=rr;
  cxt.fillRect(20,20,160,160);
  cxt.fill();

不同心但外圓包含內(nèi)圓

var rr2=cxt.createRadialGradient(250,250,20,260,260,50);
  rr2.addColorStop(0,'red');
  rr2.addColorStop(.5,'yellow');
  rr2.addColorStop(1,'blue');
  cxt.fillStyle=rr2;
  cxt.fillRect(50,50,400,400);
  cxt.fill();

不同心，外圓內(nèi)圓分離

var rr3=cxt.createRadialGradient(250,250,30,350,250,50);
  rr3.addColorStop(0,'red');
  rr3.addColorStop(.8,'yellow');
  rr3.addColorStop(1,'blue');
  cxt.fillStyle=rr3;
  cxt.fillRect(100,100,300,300);

四、圖案樣式 Patterns

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

例子：

       var img=new Image();
  img.src="diamond.png";
  img.onload=function(){
    var ptrn=cxt.createPattern(img,'repeat');
    cxt.fillStyle=ptrn;
    cxt.fillRect(250,250,80,80);
  }

注意：使用 Image 對象的 onload handler 來確保設(shè)置圖案之前圖像已經(jīng)裝載完畢。

五、陰影 Shadows

shadowOffsetX = float shadowOffsetX 和 shadowOffsetY 用來設(shè)定陰影在 X 和 Y 軸的延伸距離，它們是不受變換矩陣所影響的。負(fù)值表示陰影會往上或左延伸，正值則表示會往下或右延伸，它們默認(rèn)都為 0。 shadowOffsetY = float shadowOffsetX 和 shadowOffsetY 用來設(shè)定陰影在 X 和 Y 軸的延伸距離，它們是不受變換矩陣所影響的。負(fù)值表示陰影會往上或左延伸，正值則表示會往下或右延伸，它們默認(rèn)都為 0。 shadowBlur = float shadowBlur 用于設(shè)定陰影的模糊程度，其數(shù)值并不跟像素數(shù)量掛鉤，也不受變換矩陣的影響，默認(rèn)為 0。 shadowColor = color shadowColor 是標(biāo)準(zhǔn)的 CSS 顏色值，用于設(shè)定陰影顏色效果，默認(rèn)是全透明的黑色。

例子：

var img=new Image();
img.src="mm.jpg";
img.onload=function(){
  cxt.shadowOffsetX=10;
  cxt.shadowOffsetY=10;
  cxt.shadowBlur=8;
  cxt.shadowColor="#333";
  cxt.drawImage(img,10,10);
}

六、Canvas 填充規(guī)則

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

兩個可能的值： "nonzero": 默認(rèn)值. "evenodd":

cxt.beginPath();
  cxt.arc(100,100,50,0,Math.PI*2,true);
  cxt.arc(100,100,20,0,Math.PI*2,true);
  cxt.fill("evenodd");