從簡單的基本圖形，到復雜炫酷的動畫，通過canvas元素獲取的2D圖形渲染上下文CanvasRenderingContext2D，能夠使用豐富的API來進行圖形繪制。這篇文章將會總結在之前的canvas教程中用到的所有渲染上下文的API。

可以參考之前的教程：

• 如何繪制基本圖形可以參考：canvas基本圖形繪制
• 如何對基本圖形移動旋轉縮放可以參考：canvas圖形變換
• 如何設置基本圖形顏色和樣式可以參考：canvas樣式和顏色
• 如何使用外部圖片以及圖形組合可以參考：canvas使用圖片，圖形組合以及裁剪
• canvas如何保存和加載圖像可以參考：canvas圖像保存
• canvas動畫教程和實例：
• canvas系列教程可以參考：canvas

以下所介紹的方法和屬性，都是CanvasRenderingContext2D對象的方法和屬性。調用方式如下：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 使用ctx即可調用
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);

更加詳細的接口API文檔可以參考官方文檔。

基本圖形繪制

用於繪制基本圖形。更加詳細的用法可以參考這篇文章：canvas基本圖形繪制

矩形繪制（不需要路徑）

• void ctx.fillRect(x, y, width, height);
  • 繪制填充矩形，矩形的起點在 (x, y) 位置，矩形的尺寸是 width 和 height
• void ctx.strokeRect(x, y, width, height);
  • 在 canvas 中，使用當前的繪畫樣式，描繪一個起點在 (x, y) 、寬度為 w 、高度為 h 的矩形
• void ctx.clearRect(x, y, width, height);
  • 設置指定矩形區域內（以點 (x, y) 為起點，範圍是(width, height) ）所有像素變成透明，並擦除之前繪制的所有內容

以上API參數說明如下：

• x矩形起始點（左上角定點）的 x 軸坐標
• y矩形起始點的 y 軸坐標
• width矩形的寬度
• height矩形的高度

繪制文本

• void ctx.fillText(text, x, y [, maxWidth]);
  • 在(x,y)位置繪制（填充）文本
• void ctx.strokeText(text, x, y [, maxWidth]);
  • 在(x,y)位置繪制（描邊）文本
• ctx.measureText(text);
  • 返回一個 TextMetrics 對象，包含關於文本尺寸的信息（例如文本的寬度）

以上API參數說明如下：

• x文本起點的 x 軸坐標
• y文本起點的 y 軸坐標
• text需要繪制的文本
• maxWidth可選，繪制的最大寬度

路徑圖形

• void ctx.beginPath();
  • 通過清空子路徑列表開始一個新路徑
• void ctx.closePath();
  • 使筆點返回到當前子路徑的起始點。它嘗試從當前點到起始點繪制一條直線。如果圖形已經是封閉的或者只有一個點，那麽此方法不會做任何操作
• void ctx.moveTo(x, y);
  • 將一個新的子路徑的起始點移動到(x，y)坐標
• void ctx.lineTo(x, y);
  • 使用直線連接子路徑的最後的點到x,y坐標
• void ctx.quadraticCurveTo(cpx, cpy, x, y);
  • 添加一個2次貝賽爾曲線路徑
  • cpx, cpy第一個控制點(x,y)坐標
  • x,y為結束點坐標
• void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
  • 添加一個3次貝賽爾曲線路徑。該方法需要三個點。 第一、第二個點是控制點，第三個點是結束點。起始點是當前路徑的最後一個點，繪制貝賽爾曲線前，可以通過調用 moveTo() 進行修改。
  • cp1x, cp1y第一個控制點(x,y)坐標
  • cp2x, cp2y第二個控制點(x,y)坐標
  • x,y結束點坐標
• void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
  • 繪制一段圓弧路徑， 圓弧路徑的圓心在 (x, y) 位置，半徑為 r ，根據anticlockwise （默認為順時針）指定的方向從 startAngle 開始繪制，到 endAngle 結束。
  • x,y為繪制圓弧所在圓上的圓心坐標
  • radius為半徑
  • startAngle以及endAngle參數用以x軸為基準弧度定義了開始以及結束的弧度
  • anticlockwise為一個布爾值，指定繪制反向，默認為false表示順時針方向。true表示逆時針方向。
• void ctx.arcTo(x1, y1, x2, y2, radius);
  • 根據控制點和半徑繪制圓弧路徑，使用當前的描點(前一個moveTo或lineTo等函數的止點)。根據當前描點與給定的控制點1連接的直線，和控制點1與控制點2連接的直線，作為使用指定半徑的圓的切線，畫出兩條切線之間的弧線路徑
  • x1,y1指定第一個控制點的坐標
  • x2,y2指定第二個控制點的坐標
  • radius指定圓弧的半徑
• void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
  • 添加一個橢圓路徑，橢圓的圓心在（x,y）位置，半徑分別是radiusX 和 radiusY ，按照anticlockwise （默認順時針）指定的方向，從 startAngle 開始繪制，到 endAngle 結束。
  • x,y橢圓圓心的(x,y)坐標
  • radiusX橢圓長軸的半徑
  • radiusY橢圓短軸的半徑
  • rotation橢圓的旋轉角度，以弧度表示(非角度度數)
  • startAngle將要繪制的起始點角度，從 x 軸測量，以弧度表示(非角度度數)
  • endAngle橢圓將要繪制的結束點角度，以弧度表示(非角度度數)
  • anticlockwise為一個布爾值，指定繪制反向，默認為false表示順時針方向。true表示逆時針方向。
• void ctx.rect(x, y, width, height);
  • 創建一個矩形路徑，矩形的起點位置是 (x, y) ，尺寸為 width 和 height

路徑

• void ctx.fill(); void ctx.fill(fillRule); void ctx.fill(path, fillRule);
  • 使用當前的樣式填充子路徑
  • path需要填充的Path2D路徑
  • fillRule一種算法，決定點是在路徑內還是在路徑外:"nonzero","evenodd"
• void ctx.stroke(); void ctx.stroke(path);
  • 使用當前的樣式描邊子路徑
• void ctx.clip(); void ctx.clip(fillRule); void ctx.clip(path, fillRule);
  • 從當前路徑創建一個剪切路徑。在clip()調用之後，繪制的所有信息只會出現在剪切路徑內部
• boolean ctx.isPointInPath(x, y); boolean ctx.isPointInPath(x, y, fillRule); boolean ctx.isPointInPath(path, x, y); boolean ctx.isPointInPath(path, x, y, fillRule);
  • 判斷當前路徑是否包含檢測點
• boolean ctx.isPointInStroke(x, y); boolean ctx.isPointInStroke(path, x, y);
  • 判斷檢測點是否在路徑的描邊線上

顏色和樣式

控制繪制圖形的顏色以及樣式。更加詳細的用法可以參考這篇文章：canvas樣式和顏色

線型

• ctx.lineWidth = value;
  • 線的寬度。默認 1.0
• ctx.lineCap = "butt" || "round" || "square";
  • 線末端的類型。 允許的值： butt (默認), round, square
• ctx.lineJoin = "miter" || "round" || "bevel";
  • 定義兩線相交拐點的類型。允許的值：round, bevel, miter(默認)
• ctx.miterLimit = value;
  • 斜接面限制比例。默認 10
• Array ctx.getLineDash();
  • 返回一組描述交替繪制線段和間距（坐標空間單位）長度的數字。如果數組元素的數量是奇數，數組元素會被復制並重復。 例如， 設置線段為 [5, 15, 25] 將會得到以下返回值 [5, 15, 25, 5, 15, 25]。
• void ctx.setLineDash(segments);
  • 設置當前的線段樣式
• ctx.lineDashOffset = value;
  • 設置虛線偏移量的屬性，偏移量是float精度的數字。 初始值為 0.0。

文本樣式

• ctx.font = value;
  • 設置繪制文字時，當前字體樣式的屬性
  • value符合CSS font 語法的DOMString 字符串。默認字體是 10px sans-serif.
• ctx.textAlign = "left" || "right" || "center" || "start" || "end";
  • 文本對齊設置
• ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";
  • 基線對齊設置
• ctx.direction = "ltr" || "rtl" || "inherit";
  • 文本的方向

填充和描邊樣式

• ctx.fillStyle = color || gradient || pattern
  • 圖形內部的顏色和樣式。 默認 #000 (黑色).
  • colorDOMString 字符串，被轉換成 CSS color 顏色值
  • gradientCanvasGradient 對象 （線性漸變或者放射性漸變）
  • pattern CanvasPattern 對象 （可重復圖像）
• ctx.strokeStyle = color || gradient || pattern
  • 圖形邊線的顏色和樣式。 默認 #000 (黑色)

漸變和圖案

• CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
  • 創建一個沿參數坐標指定的直線的漸變
• CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
  • 創建一個沿著參數坐標指定的線的放射性性漸變
• CanvasPattern ctx.createPattern(image, repetition);
  • 使用指定的圖片 (a CanvasImageSource)創建圖案
  • image作為重復圖像源的CanvasImageSource對象
  • repetition DOMString，指定如何重復圖像。允許的值有："repeat" (both directions),"repeat-x" (horizontal only),"repeat-y" (vertical only), "no-repeat" (neither).

陰影

• ctx.shadowBlur = level;
  • 描述模糊效果。 默認 0
• ctx.shadowColor = color;
  • 陰影的顏色。 默認fully-transparent black
• ctx.shadowOffsetX = offset;
  • 陰影水平方向的偏移量。 默認 0
• ctx.shadowOffsetY = offset;
  • 陰影垂直方向的偏移量。 默認 0

變換

在CanvasRenderingContext2D渲染背景中的對象會有一個當前的變換矩陣，一些方法可以對其進行控制。當創建當前的默認路徑，繪制文本、圖形和Path2D對象的時候，會應用此變換矩陣。詳細內容可以參考：canvas圖形變換

• void ctx.rotate(angle);
  • 在變換矩陣中增加旋轉，角度變量表示一個順時針旋轉角度並且用弧度表示
  • angle 順時針旋轉的弧度。如果你想通過角度值計算，可以使用公式： degree * Math.PI / 180
• void ctx.scale(x, y);
  • 根據 x 水平方向和 y 垂直方向，為canvas 單位添加縮放變換
• void ctx.translate(x, y);
  • 通過在網格中移動 canvas 和 canvas 原點 x 水平方向、原點 y 垂直方向，添加平移變換
• void ctx.transform(m11, m12, m21, m22, dx, dy);
  • 使用方法參數描述的矩陣多次疊加當前的變換矩陣。
  • m11 水平方向的縮放
  • m12 水平方向的傾斜
  • m21 豎直方向的傾斜
  • m22 豎直方向的縮放
  • dx 水平方向的移動
  • dy 豎直方向的移動
• void ctx.setTtransform(m11, m12, m21, m22, dx, dy);
  • 重新設置當前的變換為單位矩陣，並使用同樣的變量調用transform()方法
• void ctx.resetTransform();
  • 使用單位矩陣重新設置當前的變換

合成

規定兩個前後繪制的兩個圖形之間的組合方式。詳細說明可以參考這兒：canvas使用圖片，圖形組合以及裁剪

• ctx.globalAlpha = value;
  • 在合成到 canvas 之前，設置圖形和圖像透明度的值。默認 1.0 (不透明)。
• ctx.globalCompositeOperation = type;
  • 通過globalAlpha應用，設置如何在已經存在的位圖上繪制圖形和圖像

圖像相關

設置圖片和canvas的交互方式，詳細說明可以參考這兒：canvas圖像保存

繪制圖像

drawImage方法用於在canvas上繪制圖像，有下面三種形式：

• void ctx.drawImage(image, dx, dy);
• void ctx.drawImage(image, dx, dy, dWidth, dHeight);
• void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

以上方法的參數含義如下：

• image繪制到上下文的元素。允許任何的 canvas 圖像源(CanvasImageSource)，例如：HTMLImageElement，HTMLVideoElement，或者 HTMLCanvasElement
• dx目標畫布的左上角在目標canvas上 X 軸的位置
• dy目標畫布的左上角在目標canvas上 Y 軸的位置
• dWidth在目標畫布上繪制圖像的寬度。 允許對繪制的圖像進行縮放。 如果不說明， 在繪制時圖片寬度不會縮放
• dHeight在目標畫布上繪制圖像的高度。 允許對繪制的圖像進行縮放。 如果不說明， 在繪制時圖片高度不會縮放
• sx需要繪制到目標上下文中的，源圖像的矩形選擇框的左上角 X 坐標
• sy需要繪制到目標上下文中的，源圖像的矩形選擇框的左上角 Y 坐標
• sWidth需要繪制到目標上下文中的，源圖像的矩形選擇框的寬度。如果不說明，整個矩形從坐標的sx和sy開始，到圖像的右下角結束
• sHeight需要繪制到目標上下文中的，源圖像的矩形選擇框的高度

像素控制

• ImageData ctx.createImageData(width, height); ImageData ctx.createImageData(imagedata);
  • 創建一個 新的、空白的、指定大小的 ImageData 對象。 所有的像素在新對象中都是透明的。
  • width ImageData新對象的寬度
  • height ImageData新對象的高度
  • imagedata 從現有的 ImageData 對象中，復制一個和其寬度和高度相同的對象。圖像自身不允許被復制。
• ImageData ctx.getImageData(sx, sy, sw, sh);
  • 返回一個 ImageData 對象，用來描述canvas區域隱含的像素數據，這個區域通過矩形表示，起始點為(sx, sy)、寬為sw、高為sh
• void ctx.putImageData(imagedata, dx, dy, [ dirtyX, dirtyY, dirtyWidth, dirtyHeight ]);
  • 將數據從已有的 ImageData 繪制到位圖上。 如果提供了臟矩形，只能繪制矩形的像素
  • dx 源圖像數據在目標畫布中的位置偏移量（x 軸方向的偏移量）
  • dy 源圖像數據在目標畫布中的位置偏移量（y 軸方向的偏移量）
  • dirtyX 可選，在源圖像數據中，矩形區域左上角的位置。默認是整個圖像數據的左上角（x 坐標）
  • dirtyY 可選，在源圖像數據中，矩形區域左上角的位置。默認是整個圖像數據的左上角（y 坐標）
  • dirtyWidth 可選，在源圖像數據中，矩形區域的寬度。默認是圖像數據的寬度
  • dirtyHeight 可選，在源圖像數據中，矩形區域的高度。默認是圖像數據的高度

canvas 狀態

CanvasRenderingContext2D渲染環境包含了多種繪圖的樣式狀態（屬性有線的樣式、填充樣式、陰影樣式、文本樣式）。下面的方法會幫助你使用這些狀態：

• void ctx.save();
  • 使用棧保存當前的繪畫樣式狀態，你可以使用restore()恢復任何改變
• void ctx.restore();
  • 恢復到最近的繪制樣式狀態，此狀態是通過save()保存到”狀態棧“中最新的元素
• ctx.canvas;
  • 對HTMLCanvasElement只讀的反向引用。如果和canvas元素沒有聯系，可能為null。

以上保存和恢復的canvas狀態包括：

• 當前的變換矩陣
• 當前的剪切區域
• 當前的虛線列表
• 以下屬性當前的值：
  • strokeStyle線框填充樣式
  • fillStyle圖形填充樣式
  • globalAlpha全局透明度
  • lineWidth線寬
  • lineCap線頭（線帽）
  • lineJoin線交方式
  • miterLimit斜接面限制比例
  • lineDashOffset虛線偏移
  • shadowOffsetX陰影X偏移
  • shadowOffsetY陰影Y偏移
  • shadowBlur陰影模糊程度
  • shadowColor陰影顏色
  • globalCompositeOperation圖形組合方式
  • font字體樣式
  • textAlign文本的對齊方式
  • textBaseline文本基線
  • direction文本方向
  • imageSmoothingEnabled圖形縮放是否平滑

原文地址：http://uusama.com/632.html
如果有什麽錯誤和遺漏的地方，歡迎大家幫忙斧正。

canvas API總結