溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“分析JavaScript HTML DOM Canvas對象”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“分析JavaScript HTML DOM Canvas對象”吧!
Canvas對象表示HTML5 <canvas>元素。
您可以使用getElementById()訪問<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 畫布
HTML參考： HTML <canvas>標簽
到此，相信大家對“分析JavaScript HTML DOM Canvas對象”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
