繪制路徑

基本步驟

1. 首先，你需要創(chuàng)建路徑起始點。
2. 然后你使用[畫圖命令]去畫出路徑。
3. 之后你把路徑封閉。
4. 一旦路徑生成，你就能通過描邊或填充路徑區(qū)域來渲染圖形。

新建一條路徑，生成之后，圖形繪制命令被指向到路徑上生成路徑。
beginPath()

閉合路徑之后圖形繪制命令又重新指向到上下文中。
closePath()

通過線條來繪制圖形輪廓。
stroke()

通過填充路徑的內(nèi)容區(qū)域生成實心的圖形。
fill()

將筆觸移動到指定的坐標x以及y上。
moveTo(x, y)

繪制矩形

x與y指定了在canvas畫布上所繪制的矩形的左上角（相對于原點）的坐標。width和height設置矩形的尺寸。

繪制一個填充的矩形
fillRect(x, y, width, height)

繪制一個矩形的邊框
strokeRect(x, y, width, height)

清除指定矩形區(qū)域，讓清除部分完全透明。
clearRect(x, y, width, height)

繪制一個左上角坐標為（x,y），寬高為width以及height的矩形。
rect(x, y, width, height)

繪制線

繪制直線，需要用到的方法lineTo()。
lineTo(x, y)

繪制圓弧

畫一個以（x,y）為圓心的以radius為半徑的圓弧（圓），從startAngle開始到endAngle結束，按照anticlockwise給定的方向（默認為順時針）來生成。
arc(x, y, radius, startAngle, endAngle, anticlockwise)

根據(jù)給定的控制點和半徑畫一段圓弧，再以直線連接兩個控制點。
arcTo(x1, y1, x2, y2, radius)

arc方法，該方法有六個參數(shù)：x,y為繪制圓弧所在圓上的圓心坐標。radius為半徑。startAngle以及endAngle參數(shù)用弧度定義了開始以及結束的弧度。這些都是以x軸為基準。參數(shù)anticlockwise為一個布爾值。為true時，是逆時針方向，否則順時針方向。

arc()函數(shù)中表示角的單位是弧度，不是角度。角度與弧度的js表達式:弧度=(Math.PI/180)*角度。

繪制貝賽爾曲線

繪制二次貝塞爾曲線，cp1x,cp1y為一個控制點，x,y為結束點。
quadraticCurveTo(cp1x, cp1y, x, y)

繪制三次貝塞爾曲線，cp1x,cp1y為控制點一，cp2x,cp2y為控制點二，x,y為結束點。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

顏色控制

fillStyle = color 設置圖形的填充顏色。
strokeStyle = color 設置圖形輪廓的顏色。

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

全局透明度

globalAlpha = transparencyValue
這個屬性影響到 canvas 里所有圖形的透明度，有效的值范圍是 0.0 （完全透明）到 1.0（完全不透明），默認是 1.0。

控制線條的大小

lineWidth = value
設置線條寬度。
線條在制作1px寬的線條的時候，如果你定位開始是整數(shù)如 （1,1）---- （1,5）的位置則會在坐標1為中心的前后0.5畫線實現(xiàn)1px寬，然后系統(tǒng)會在0-0.5和1.5-2之間填充虛影造成邊緣不清晰的線條。

1px線寬展示

lineCap = type
設置線條末端樣式。
屬性 lineCap 的值決定了線段端點顯示的樣子。它可以為下面的三種的其中之一：butt，round 和 square。默認是 butt。
默認butt到點即停止， round會在終止線后加一個半徑為一半線寬的半圓， square會在終止線后加一個高度為一般線寬的方塊

線條末端展示

lineJoin = type
設定線條與線條間接合處的樣式。
lineJoin 的屬性值決定了圖形中兩線段連接處所顯示的樣子。它可以是這三種之一：round, bevel 和 miter。默認是 miter。
round接口處是圓角， bevel接口處是水平的，miter線段的外側邊緣會延伸交匯于一點上

接口展示

miterLimit = value
限制當兩條線相交時交接處最大長度；所謂交接處長度（斜接長度）是指線條交接處內(nèi)角頂點到外角頂點的長度。
miter 的效果，線段的外側邊緣會延伸交匯于一點上。線段直接夾角比較大的，交點不會太遠，但當夾角減少時，交點距離會呈指數(shù)級增大。

miter效果演示

getLineDash()
返回一個包含當前虛線樣式，長度為非負偶數(shù)的數(shù)組。
setLineDash(segments)
設置當前虛線樣式。
lineDashOffset = value
設置虛線樣式的起始偏移量。
用 setLineDash 方法和 lineDashOffset 屬性來制定虛線樣式. setLineDash 方法接受一個數(shù)組，來指定線段與間隙的交替；lineDashOffset 屬性設置起始偏移量.

漸變

createLinearGradient(x1, y1, x2, y2)
createLinearGradient 方法接受 4 個參數(shù)，表示漸變的起點 (x1,y1) 與終點 (x2,y2)。
createRadialGradient(x1, y1, r1, x2, y2, r2)
createRadialGradient 方法接受 6 個參數(shù)，前三個定義一個以 (x1,y1) 為原點，半徑為 r1 的圓，后三個參數(shù)則定義另一個以 (x2,y2) 為原點，半徑為 r2 的圓。

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

gradient.addColorStop(position, color)
addColorStop 方法接受 2 個參數(shù)，position 參數(shù)必須是一個 0.0 與 1.0 之間的數(shù)值，表示漸變中顏色所在的相對位置。例如，0.5 表示顏色會出現(xiàn)在正中間。color 參數(shù)必須是一個有效的 CSS 顏色值（如 #FFF， rgba(0,0,0,1)，等等）。

最簡單的線性黑白漸變的例子。
var lineargradient = ctx.createLinearGradient(0,0,150,150);
lineargradient.addColorStop(0,'white');
lineargradient.addColorStop(1,'black');

使用圖片

createPattern(image, type)
該方法接受兩個參數(shù)。Image 可以是一個 Image 對象的引用，或者另一個 canvas 對象。Type 必須是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。創(chuàng)建出一個 pattern 之后，賦給 fillStyle 或 strokeStyle 屬性即可。

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  // 創(chuàng)建新 image 對象，用作圖案
  var img = new Image();
  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
  img.onload = function() {

    // 創(chuàng)建圖案
    var ptrn = ctx.createPattern(img, 'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0, 0, 150, 150);

  }
}

帶有某種圖案的線條

陰影

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

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