簡介:<canvas>?</canvas>?是?HTML5?新增的，一個可以使用腳本(通常為?JavaScript) 在其中繪制圖像的?HTML?元素。提供了一個通過JavaScript?和?HTML的<canvas>元素來繪制圖形的方式。它可以用于動畫、游戲畫面、數據可視化、圖片編輯(如照片集)以及實時視頻處理等方面。

參考文檔:?Canvas - Web API 接口參考 | MDN

1. canvas 標簽

使用 canvas 需要在 頁面中增加 canvas 標簽

<canvas id="canvas" width="300" height="300">游覽器不支持 canvas , 替換成里面的內容。其他標簽代替 ： <img src="url" alt="代替圖"></canvas>

注意 ：

• canvas 默認 寬：300 ， 高 ：150 。
• 最好在標簽里顯示修改寬高，在CSS表中修改如果比例與默認值不同可能會使繪制的圖扭曲
• 在較老的游覽器（IE9之前） ， 在 canvas 標簽內一個增加不支持 canvas 時顯示的內容(如果瀏覽器支持canvas標簽, 則標簽體內容不顯示, 只有在瀏覽器不支持canvas標簽時才會顯示里面的內容)
• 結束標簽不可省略

2. 渲染上下文

canvas 會創建一個大小固定的畫布 ，會公開一個或多個渲染上下文（Rending Context）（可以理解是一個畫筆）

使用渲染上下文可以對畫步進行操作

獲取渲染上下文

通過canvas節點的 getContext方法獲取渲染上下文

需傳入一個參數 ， 2d 或 webgl 等 ，這里只介紹 2d(描繪2d 圖像)

const canvas = document.querySelector('#myCanvas'); if (!canvas?.getContext){console.log('不支持getContext');return; } ctx = canvas.getContext('2d'); // 這里的ctx指代的就是canvas渲染上下文

tips:?因為有的游覽器不支持 getContext 方法，使用前可以先檢查一下

3. 使用渲染上下文(主要)

渲染上下文可以畫圖進行填充?fill()，也可以畫圖后描邊?stroke()。

渲染上下文不設置時默認顏色是黑色 。

3.1 設置顏色

設置顏色分為設置填充顏色 （fillStyle()） 和 描邊顏色 (strokeStyle() )。

每次對圖形上色時 ，都會選擇當前渲染上下文設置的顏色進行上色 ，如果沒有默認黑色。

而顏色值可以使用 rgb , rbga , 顏色名稱（如 red ) , 十六進制顏色碼（#ff0000) …

// 設置填充顏色 ， 用于填充圖像 ctx.fillStyle = "rgba(0,0,0,0.2)"; // 設置邊框顏色 ， 用與描繪邊框時填充邊框 ctx.strokeStyle = 'green' // ctx.strokeStyle = '#ace'

設置了顏色后 ，有兩種方法使用顏色:

1. 是創建圖片后自動的立即的上色。(常用)
ctx.fillRect(x,y,width,height) : 在 左上角為（x,y) 的四邊形填色。

ctx.strokeRect(x,y,width,height) :　在 左上角為（x,y) 的四邊形描邊。

2. 是先創建圖形，然后再上色
ctx.rect(20,20,30,30) ; ctx.fill()?: 先描繪了一個四邊形 ， 再調用 fill() 方法填色

ctx.rect(20,20,30,30) ; ctx.stroke() : 先描繪了一個四邊形 ， 再調用 fill() 方法描邊

3.2 描繪圖形?

?1.繪制矩形

x,y 是相對畫步的左上角的坐標, width寬/height高
1). rect(x,y,width,height) ：創建一個矩形（不可見），需使用 fill/stroke 進行上色(如上方式2)

2). fillRect(x, y, width, height) ：繪制一個填充的矩形。

3). strokeRect(x, y, width, height) ：繪制一個矩形的邊框。

4). clearRect(x, y, widh, height) ：清除指定的矩形區域，然后這塊區域會變的完全透明

2. 繪制路徑 (path)? 即畫線, 一般分4或5步

1). 創建路徑? ?ctx.beginPath? ? ? ? ?(必要)?

2). 設置起點? ctx.moveTo(x,y)? ? ? ? (必要)

3). ctx.lineTo(x,y) : 從起點到 x,y,?畫直線? ? ? ? ? ?(必要)

4). ctx.closePath() : 會將最后的終于與起點連接起來,?閉合路徑? ?（非必要）

5). ctx.fill() / ctx.stroke() :?填色或描邊? ? ? ? ? (必要)

如果是填色 ， 那么是將終點和起點連起來形成的閉合圖形進行填色。

如果是描邊 ，則只描繪實際有的邊，即如果沒有閉合路徑的話，終點與起點之間就沒有線，也就不會描邊

3 繪制圓弧

有兩個方法可以繪制圓弧:??

1.? arc(x,y,r,starAngle,endAngle,direction)

x ,y 表示圓形 ， r 表示半徑

starAngle 表示起始弧度（單位 rad) ， endAngle 表示結束弧度。

direction(布爾值) : 表示描繪的方向 ， true 為 逆時針 ， false 為順時針（默認）

**注意點 ： **

度數都為弧度制 ，使用 Math.PI 的倍數表示
0弧度表示 X 軸的正方向
藍色 ：ctx.arc(10,10,10,0,Math.PI/2，true)

紅色 ： ctx.arc(10,10,10,0,Math.PI/2 ，false)
?

?

2.?通過繪制路徑繪制弧??arcTo(a,b,c,d,e)

a ,ｂ：控制點坐標 1

c , d : 控制點坐標 2

e : 弧半徑

弧由 控制點1與起點 和 控制點1與控制點2 兩切線決定，但是起點和控制點2 不一定是切點

?

4. 繪制貝塞爾曲線

ctx.quadraticCurveTo(): 添加一個 2 次貝賽爾曲線路徑。

ctx.bezierCurveTo(): 添加一個 3 次貝賽爾曲線路徑。該方法需要三個點。 第一、第二個點是控制點，第三個點是結束點。起始點是當前路徑的最后一個點，繪制貝賽爾曲線前，可以通過調用?moveTo()?進行修改。(詳細可參考MDN)

5 . 繪制文本

使用 fillText( “文本” ， x,y,[maxWidth]) 繪制文本 ，使用 stroke 即繪制文本的邊?

文本樣式 ：

ctx.font = value : 設置文本樣式 ，如CSS設置一樣 ， 默認 10px sans-serif
ctx.textAlign = value : 文本對齊選項。 可選的值包括：start, end, left, right or center。 默認值是 start。
ctx.textBaseline = value　：　文本方向。可能的值包括：ltr, rtl, inherit。默認值是 inherit。

//文字對齊方式 start、end、center、left、right(選填) ctx.textAlign = 'start'; //設置字體和尺寸 (必填) ctx.font = '400 12px PingFangSC-Regular'; // 第一項類似于font-weight,可以設置為bold/normal等 //填充文字 x-橫坐標 y-縱坐標 (必填) ctx.fillStyle = 'rgba(0,0,0,0.85)'; ctx.fillText('hello canvas', 32, 50);

6. 繪制圖片

ctx.drawImage(img,0,w,h) ，將圖片對象繪制到目的坐標位置?

注意: 如果圖片是從網絡加載 ，最好等 img.onload 后再繪制

第 1 個參數是 ： 要繪制的圖片源，可是是圖片，也可以是 canvas 節點

第 2 和 3 個參數 ：　目標位置的左上角　。最后繪制出的圖片的左上角就是該點。

第 4 和 5 參數數 ，分別是 width ,height 。控制圖片大小。

7 .切片

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)?

參數 1 ：圖片源 ， 也可以是一個 canvas ，

? 2,3 ： 圖片源上的一點 ，為切割圖的左上角

? 4,5 ：寬高 ， 切圖大小

6,7 ： 繪制圖的起點（左上角點）

8,9 : 繪制圖的寬高

4. 樣式設置

全局透明

ctx.globalAlpha = transparencyValue?

transparencyValue的值為 0-1 ， 0 為完全透明 ， 1為完全不透明

設置后不會影響之前已經畫號的 , 會影響之后的 。即使 后面使用了 raba(0,0,0,1)

圖線樣式

• ctx.lineWidth : 線寬 （可無單位，默認px）?
• ctx.lineCap : 線帽（也叫線端）

???????有 butt 直接切斷 , round 圓頂 ， square 增加一個方塊

• ctx.lineJoin ： 線段之間連線的方法

???????round 通過填充一個額外的，圓心在相連部分末端的扇形，繪制拐角的形狀。 圓角的半徑是線段的寬度。
bevel 在相連部分的末端填充一個額外的以三角形為底的區域， 每個部分都有各自獨立的矩形拐角。
miter(默認) 通過延伸相連部分的外邊緣，使其相交于一點，形成一個額外的菱形區域。

• ctx.setLineDash(實線長度，間隙) ：設置成虛線

• ctx.lineDashOffset : 虛線起始偏移量

5. 獲取 Canvas 為圖片

canvas.toDataURL()

let img = document.querySelector('img'); let imgdata = canvas.toDataURL('image/png');let newdata = imgdata.replace(/^data:image\/png/, 'data:image/jpeg'); (看情況使用)img.src = newdata;

6.實例

實例1: 繪制直角

ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(0,50); ctx.lineTo(80,50); ctx.rotate(0.5 * Math.PI); ctx.stroke();

實例2: 繪制圓角矩形

ctx.beginPath(); ctx.arc(150, 150, 50, 0, 0.5 * Math.PI, false); ctx.moveTo(150,200); ctx.lineTo(50,200); ctx.arc(50, 150,50,0.5 * Math.PI,1 * Math.PI, false); ctx.moveTo(0,150); ctx.lineTo(0,50); ctx.arc(50, 50,50,1 * Math.PI,1.5 * Math.PI, false); ctx.moveTo(50,0); ctx.lineTo(150,0); ctx.arc(150, 50,50,1.5 * Math.PI,2 * Math.PI, false); ctx.moveTo(200,50); ctx.lineTo(200,150); ctx.stroke();

效果:

?

?參考：https://blog.csdn.net/NiHoAjy/article/details/119682331

總結

以上是生活随笔為你收集整理的canvas简易使用教程的全部內容，希望文章能夠幫你解決所遇到的問題。

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