Canvas:樣式及顏色

色彩 Colors

fillStyle:填充色 fillStyle = color
**strokeStyle描邊色**strokeStyle = color

透明度Transparency

globalAlpha: globalAlpha = 0.2 ;
rgba(): fillStyle = ‘rgba(r,g,b,0.2)’;
區別： 都可以作爲做出透明度效果，但是從不同的樣式中有不同的優勢，global alpha 可以設置指定的透明度多層添加，而rgba動態的設定部分路徑的透明度。

線型

lineWidth : 設置線條寬度 lineWidth = 10;

之前提過默認寬度爲2是錯誤的，默認寬度爲1，但是由於從整數像素點起向四周擴充0.5就導致了看似爲2的效果，正確的解決方法應是從0.5像素畫起；且線寬爲奇數

lineCap : 設置末端樣式 lineCap = ‘buff’

butt: 默認
round: 圓滑，半徑 = 1/2 * 線寬
square: 矩形，高 = 1/2 * 線寬

lineJoin : 設置交界處的樣式 lineJoin = ‘round’

round: 圓滑，半徑 = 1/2 * 線寬>>bevel: 受miterLimit影響
miter: 默認，邊角互連。

miterLimit : 限制交點的最大長度
setLineDash(): 返回一個包含當前虛線樣式，長度爲非負的數組: getLineDash([5,2]);
lineDashOffset: 設置虛線的起始偏移量 lineDashOffset = 1;

漸變Gradients

//線性漸變
var lineargradient = ctx.createLinearGradient(0,0,150,150);
lineargradient.addColorStop(0,'white');
lineargradient.addColorStop(1,'black');
ctx.fillStyle = lineargradient;
//徑向漸變
var radialgradient = ctx.createRadialGradient(75,75,0,75,75,100);
radialgradient .addColorStop(0, '#FF5F98');
  radialgradient .addColorStop(0.75, '#FF0188');
  radialgradient .addColorStop(1, 'rgba(255,1,136,0)')
  ctx.fillStyle = radialgradient ;

圖案樣式Patterns

createPattern（image，type）;

type:

repeat
repeat-x
repeat-y
no-repeat

實例

  var img = new Image();
  img.src = 'images/wallpaper.png';
  img.onload = function(){
    // 創建圖案
    var ptrn = ctx.createPattern(img,'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0,0,150,150);
  }

陰影Shadows

shadowOffsetX = float

shadowOffsetX 和 shadowOffsetY 用來設定陰影在 X 和 Y 軸的延伸距離，它們是不受變換矩陣所影響的。負值表示陰影會往上或左延伸，正值則表示會往下或右延伸，它們默認都爲 0。

shadowOffsetY = float

shadowOffsetX 和 shadowOffsetY 用來設定陰影在 X 和 Y 軸的延伸距離，它們是不受變換矩陣所影響的。負值表示陰影會往上或左延伸，正值則表示會往下或右延伸，它們默認都爲 0。
shadowBlur = float
shadowBlur 用於設定陰影的模糊程度，其數值並不跟像素數量掛鉤，也不受變換矩陣的影響，默認爲 0。
shadowColor = color
shadowColor 是標準的 CSS 顏色值，用於設定陰影顏色效果，默認是全透明的黑色。
文字陰影的例子
這個例子繪製了帶陰影效果的文字。

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);
}

Canvas填充規則

nonzero : 默認
evenodd : even-odd rule:奇偶規則。該算法在基於矢量的圖形軟件中實施。它決定如何與多於一個的閉合輪廓的圖形的形狀將被填充，

奇數：內部填充
偶數：外部填充