HTML 5 Canvas 參考手冊
描述
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() |