HTML5畫布描述

HTML5?<canvas>標簽用于通過腳本（通常是JavaScript）動態繪制圖形。 但是，<canvas>元素沒有自己的繪圖功能（它只是圖形的容器）， 您必須使用腳本來實際繪制圖形。 getContext()方法返回一個對象，該對象提供在畫布上繪制的方法和屬性。此參考將介紹getContext("2d")對象的屬性和方法，可用于在畫布上繪制文本，線條，方框，圓圈等。

瀏覽器支持

下表是各主流瀏覽器對<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()

總結

以上是生活随笔為你收集整理的HTML5 canvas 详细的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。