1.canvas繪制文本

①canvas繪制文本需要用到的兩個方法：fillText() ?strokeText()

• 參數一：text 文本內容 ?

• 參數二：x 文本的起始x軸坐標 ?

• 參數三：y 文本的起始y軸坐標 ?

• 參數四：maxWidth：可選參數，文本在畫布上的最大寬度，如果指定了該值，文本寬度超出的話會自動水平縮放

//1.fillText('xxx',x,y,maxWidth) cxt.fillText('前端要分享', 50, 50); //2.strokeText('xxx',x,y,maxWidth) cxt.strokeText('前端要分享', 50, 100);

②在繪制文本之前，可以給文本設置一些樣式

ctx.font： 繪制文本時可設置文本的字體樣式，默認字體樣式是 10px sans-serif

ctx.font = "48px serif"

ctx.textAlign：繪制文本時設置文本的水平方向的對齊方式，默認是左對齊，即文本在坐標點右側，它的值有：

• left：文本在坐標點點右側，坐標點在文本左側

• right：文本在坐標點左側側

• center：文本中間位置在坐標點

• start：同left

• end：同right

ctx.textBaseline：繪制文本時設置文本基線，決定文本垂直方向的對齊方式，默認是alphabetic，它的值有：

• top：基線在文本的頂部

• hanging：基線是懸掛基線

• middle：基線在文本中間

• alphabetic：基線是標準的字母基線

• bottom：基線在文本的底部

2.canvas繪制圓弧

①繪制圓弧可以使用arc()方法，以(x,y)坐標點為圓心，繪制指定半徑的的圓或圓弧

arc(x,y,r,startAngle,endAngle)

• x：圓心點x軸坐標

• y：圓心點y軸坐標

• r：圓弧半徑

• startAngle：圓弧的起始弧度位置，單位以弧度表示 Math.PI

• endAngle：圓弧的終止弧度位置，單位以弧度表示 Math.PI

• directron：決定圓弧繪制的順序 默認 false 順時針旋轉。 true 逆時針旋轉。

求圓上點的坐標：

const x = midpointX + radius*Math.cos(angle*Math.PI/180) const y = midpointY + radius*Math.sin(angle*Math.PI/180)

3.canvas繪制圖像

1.方法：drawImage() ?

2.將圖像繪制在畫布上，要等img加載完后再調用drawImage()方法，監聽img的load事件，在load事件處理程序中調用drawImage()。

// 繪制圖片的方法：drawImage(img,x,y) //1.將圖片原封不動繪制到畫布上，有三個參數：參數一: img圖片； 參數二：x 圖片x軸位置； 參數三：y 圖片y軸位置 const img = new Image(); img.src = './imgs/1.jpeg'//圖片加載時的函數 img.onload = function() {//繪制圖片cxt.drawImage(img, 50, 50) }

3.drawImage()可以接收不同的參數

①三個參數：drawImage(img,x,y)

img: 目標圖片? ? x,y:圖片的位置 ?

②五個參數：drawImage(img,x,y,width,height)

img：目標圖片? x,y：圖片的位置? width,height：設置圖片的大小

//2.將圖片按照特定的大小繪制到畫布上：img(目標圖片) x,y(圖片位置) width,height(圖片特定大小) const img1 = new Image(); img1.src = './imgs/1.jpeg';img1.onload = function() {cxt.drawImage(img1, 360, 50, 150, 150) }

③九個參數：drawImage(img,sourcex,sourcey,souceWidth,souceHeight,x,y,width,height) 常用于繪制雪碧圖??

img(目標圖片) sourcex,sourcey(圖片截取位置) souceWidth,souceHeight(圖片截取大小) x,y(繪制圖片位置) width,height(圖片的大小=截取的圖片大小)

//3.雪碧圖截取，九個參數：img(目標圖片) sourcex,sourcey(圖片截取位置) souceWidth,souceHeight(圖片截取大小) x,y(繪制圖片位置) width,height(圖片的大小=截取的圖片大小) const img2 = new Image(); img2.src = './imgs/2.jpeg';img2.onload = function() {cxt.drawImage(img2, 0, 0, 195.5, 196, 50, 360, 195.5, 196) }

4.canvas狀態的保存和恢復

1.方法：save()和restore()

save()：用于狀態保存，無參數；Canvas狀態存儲在棧中，每當save()方法被調用后，當前的狀態就被推送到棧中保存。

restore()：用于狀態恢復，無參數；每一次調用 restore 方法，上一個保存的狀態就從棧中彈出，所有設定都恢復(類似數組的?pop())。

5.canvas畫布變形

①canvas畫布位移: translate(x,y) 可以改變坐標系的位移 ?

x,y：表示移動后的坐標原點的位置

cxt.translate(100, 100) //將坐標系原點的位置從(0,0)變為(100,100)

②canvas畫布旋轉：rotate(angle)? angle是弧度? 將1弧度轉換為角度：angle*Math.fllor(1)/180

cxt.fillStyle = 'blue' cxt.rotate(1) //cxt.rotate(angle*Math.floor(1)/180) cxt.fillRect(0, 0, 100, 100)

③canvas畫布的縮放：scale(x,y)? x,y:分別對應x,y軸放大或者縮小的倍數? 縮放的本質是畫布的縮放

cxt.fillStyle = 'blue'; cxt.scale(2, 2) cxt.fillRect(100, 100, 100, 100)

總結

以上是生活随笔為你收集整理的H5新特性：canvas学习2的全部內容，希望文章能夠幫你解決所遇到的問題。

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