JavaScript HTML DOM Canvas 物件

Canvas 物件

var x = document.getElementById("myCanvas");

注意 ： <canvas>元素沒有自己的繪圖功能（它只是圖形的容器） - 您必須使用指令碼來實際繪製圖形。 getContext() 方法返回一個物件，該物件提供在畫布上繪製的方法和屬性。此參考將介紹getContext（“2d”）物件的屬性和方法，可用於在畫布上繪製文字，線條，框，圓等。

顏色樣式和陰影

下表是畫布顏色樣式和陰影相關的 屬性  ：

屬性	描述
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	設定或返回如何將新映像繪製到現有映像上

HTML參考： HTML5 畫布

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69942367/viewspace-2659837/，如需轉載，請註明出處，否則將追究法律責任。