溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“javascript中的canvas方法有哪些”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！
javascript canvas方法有：createLinearGradient()、createPattern()、rect()、fillRect()、fill()、stroke()、clip()、arc()、arcTo()等等。
本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
<canvas> 標簽用于繪制圖像（通過腳本，通常是 JavaScript）。
不過，<canvas> 元素本身并沒有繪制能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實際的繪圖任務。
getContext() 方法可返回一個對象，該對象提供了用于在畫布上繪圖的方法和屬性。
顏色、樣式和陰影
| 方法 | 描述 |
|---|---|
| createLinearGradient() | 創(chuàng)建線性漸變（用在畫布內(nèi)容上）。 |
| createPattern() | 在指定的方向上重復指定的元素。 |
| createRadialGradient() | 創(chuàng)建放射狀/環(huán)形的漸變（用在畫布內(nèi)容上）。 |
| addColorStop() | 規(guī)定漸變對象中的顏色和停止位置。 |
矩形
| 方法 | 描述 |
|---|---|
| rect() | 創(chuàng)建矩形。 |
| fillRect() | 繪制"被填充"的矩形。 |
| strokeRect() | 繪制矩形（無填充）。 |
| clearRect() | 在給定的矩形內(nèi)清除指定的像素。 |
路徑
| 方法 | 描述 |
|---|---|
| fill() | 填充當前繪圖（路徑）。 |
| stroke() | 繪制已定義的路徑。 |
| beginPath() | 起始一條路徑，或重置當前路徑。 |
| moveTo() | 把路徑移動到畫布中的指定點，不創(chuàng)建線條。 |
| closePath() | 創(chuàng)建從當前點回到起始點的路徑。 |
| lineTo() | 添加一個新點，然后在畫布中創(chuàng)建從該點到最后指定點的線條。 |
| clip() | 從原始畫布剪切任意形狀和尺寸的區(qū)域。 |
| quadraticCurveTo() | 創(chuàng)建二次貝塞爾曲線。 |
| bezierCurveTo() | 創(chuàng)建三次貝塞爾曲線。 |
| arc() | 創(chuàng)建弧/曲線（用于創(chuàng)建圓形或部分圓）。 |
| arcTo() | 創(chuàng)建兩切線之間的弧/曲線。 |
| isPointInPath() | 如果指定的點位于當前路徑中，則返回 true，否則返回 false。 |
轉(zhuǎn)換
| 方法 | 描述 |
|---|---|
| scale() | 縮放當前繪圖至更大或更小。 |
| rotate() | 旋轉(zhuǎn)當前繪圖。 |
| translate() | 重新映射畫布上的 (0,0) 位置。 |
| transform() | 替換繪圖的當前轉(zhuǎn)換矩陣。 |
| setTransform() | 將當前轉(zhuǎn)換重置為單位矩陣。然后運行 transform()。 |
文本
| 方法 | 描述 |
|---|---|
| fillText() | 在畫布上繪制"被填充的"文本。 |
| strokeText() | 在畫布上繪制文本（無填充）。 |
| measureText() | 返回包含指定文本寬度的對象。 |
圖像繪制
| 方法 | 描述 |
|---|---|
| drawImage() | 向畫布上繪制圖像、畫布或視頻。 |
像素操作
| 方法 | 描述 |
|---|---|
| createImageData() | 創(chuàng)建新的、空白的 ImageData 對象。 |
| getImageData() | 返回 ImageData 對象，該對象為畫布上指定的矩形復制像素數(shù)據(jù)。 |
| putImageData() | 把圖像數(shù)據(jù)（從指定的 ImageData 對象）放回畫布上。 |
其他
| 方法 | 描述 |
|---|---|
| save() | 保存當前環(huán)境的狀態(tài)。 |
| restore() | 返回之前保存過的路徑狀態(tài)和屬性。 |
| createEvent() | |
| getContext() | |
| toDataURL() |
“javascript中的canvas方法有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
