HTML 5 Canvas 參考手冊

標籤：

HTML 5 Canvas 參考手冊

• HTML 視頻/音頻
• HTML 文件類型

描述

HTML5 <canvas> 標籤用於繪製映像（通過指令碼，通常是 JavaScript）。

不過，<canvas> 元素本身並沒有繪製能力（它僅僅是圖形的容器） - 您必須使用指令碼來完成實際的繪圖任務。

getContext() 方法可返回一個對象，該對象提供了用於在畫布上繪圖的方法和屬性。

本手冊提供完整的 getContext("2d") 對象屬性和方法，可用於在畫布上繪製文本、線條、矩形、圓形等等。

瀏覽器支援

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支援 <canvas> 及其屬性和方法。

注釋：Internet Explorer 8 以及更早的版本不支援 <canvas> 元素。

顏色、樣式和陰影

屬性	描述
fillStyle	設定或返回用於填充繪畫的顏色、漸層或模式
strokeStyle	設定或返回用於筆觸的顏色、漸層或模式
shadowColor	設定或返回用於陰影的顏色
shadowBlur	設定或返回用於陰影的模糊層級
shadowOffsetX	設定或返回陰影距形狀的水平距離
shadowOffsetY	設定或返回陰影距形狀的垂直距離

方法	描述
createLinearGradient()	建立線性漸層（用在畫布內容上）
createPattern()	在指定的方向上重複指定的元素
createRadialGradient()	建立放射狀/環形的漸層（用在畫布內容上）
addColorStop()	規定漸層對象中的顏色和停止位置

線條樣式

屬性	描述
lineCap	設定或返回線條的結束端點樣式
lineJoin	設定或返回兩條線相交時，所建立的拐角類型
lineWidth	設定或返回當前的線條寬度
miterLimit	設定或返回最大斜接長度

矩形

方法	描述
rect()	建立矩形
fillRect()	繪製“被填充”的矩形
strokeRect()	繪製矩形（無填充）
clearRect()	在給定的矩形內清除指定的像素

路徑

方法	描述
fill()	填充當前繪圖（路徑）
stroke()	繪製已定義的路徑
beginPath()	起始一條路徑，或重設當前路徑
moveTo()	把路徑移動到畫布中的指定點，不建立線條
closePath()	建立從當前點回到起始點的路徑
lineTo()	添加一個新點，然後在畫布中建立從該點到最後指定點的線條
clip()	從原始畫布剪下任意形狀和尺寸的地區
quadraticCurveTo()	建立二次方貝茲曲線
bezierCurveTo()	建立三次方貝茲曲線
arc()	建立弧/曲線（用於建立圓形或部分圓）
arcTo()	建立兩切線之間的弧/曲線
isPointInPath()	如果指定的點位於當前路徑中，則返回 true，否則返回 false

轉換

方法	描述
scale()	縮放當前繪圖至更大或更小
rotate()	旋轉當前繪圖
translate()	重新對應畫布上的 (0,0) 位置
transform()	替換繪圖的當前轉換矩陣
setTransform()	將當前轉換重設為單位矩陣。然後運行 transform()

文本

屬性	描述
font	設定或返迴文本內容的當前字型屬性
textAlign	設定或返迴文本內容的當前對齊
textBaseline	設定或返回在繪製文本時使用的當前文本基準

方法	描述
fillText()	在畫布上繪製“被填充的”文本
strokeText()	在畫布上繪製文本（無填充）
measureText()	返回包含指定文本寬度的對象

映像繪製

方法	描述
drawImage()	向畫布上繪製映像、畫布或視頻

像素操作

屬性	描述
width	返回 ImageData 對象的寬度
height	返回 ImageData 對象的高度
data	返回一個對象，其包含指定的 ImageData 對象的映像資料

方法	描述
createImageData()	建立新的、空白的 ImageData 對象
getImageData()	返回 ImageData 對象，該對象為畫布上指定的矩形複製像素資料
putImageData()	把映像資料（從指定的 ImageData 對象）放回畫布上

合成

屬性	描述
globalAlpha	設定或返回繪圖的當前 alpha 或透明值
globalCompositeOperation	設定或返回新映像如何繪製到已有的映像上

其他

方法	描述
save()	儲存當前環境的狀態
restore()	返回之前儲存過的路徑狀態和屬性
createEvent()
getContext()
toDataURL()

HTML 5 Canvas 參考手冊