1.canvas繪制文本

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

• 參數(shù)一：text 文本內(nèi)容 ?

• 參數(shù)二：x 文本的起始x軸坐標(biāo) ?

• 參數(shù)三：y 文本的起始y軸坐標(biāo) ?

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

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

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

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

ctx.font = "48px serif"

ctx.textAlign：繪制文本時設(shè)置文本的水平方向的對齊方式，默認(rèn)是左對齊，即文本在坐標(biāo)點右側(cè)，它的值有：

• left：文本在坐標(biāo)點點右側(cè)，坐標(biāo)點在文本左側(cè)

• right：文本在坐標(biāo)點左側(cè)側(cè)

• center：文本中間位置在坐標(biāo)點

• start：同left

• end：同right

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

• top：基線在文本的頂部

• hanging：基線是懸掛基線

• middle：基線在文本中間

• alphabetic：基線是標(biāo)準(zhǔn)的字母基線

• bottom：基線在文本的底部

2.canvas繪制圓弧

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

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

• x：圓心點x軸坐標(biāo)

• y：圓心點y軸坐標(biāo)

• r：圓弧半徑

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

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

• directron：決定圓弧繪制的順序 默認(rèn) false 順時針旋轉(zhuǎn)。 true 逆時針旋轉(zhuǎn)。

求圓上點的坐標(biāo)：

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加載完后再調(diào)用drawImage()方法，監(jiān)聽img的load事件，在load事件處理程序中調(diào)用drawImage()。

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

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

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

img: 目標(biāo)圖片? ? x,y:圖片的位置 ?

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

img：目標(biāo)圖片? x,y：圖片的位置? width,height：設(shè)置圖片的大小

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

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

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

//3.雪碧圖截取，九個參數(shù)：img(目標(biāo)圖片) 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狀態(tài)的保存和恢復(fù)

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

save()：用于狀態(tài)保存，無參數(shù)；Canvas狀態(tài)存儲在棧中，每當(dāng)save()方法被調(diào)用后，當(dāng)前的狀態(tài)就被推送到棧中保存。

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

5.canvas畫布變形

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

x,y：表示移動后的坐標(biāo)原點的位置

cxt.translate(100, 100) //將坐標(biāo)系原點的位置從(0,0)變?yōu)?100,100)

②canvas畫布旋轉(zhuǎn)：rotate(angle)? angle是弧度? 將1弧度轉(zhuǎn)換為角度：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:分別對應(yīng)x,y軸放大或者縮小的倍數(shù)? 縮放的本質(zhì)是畫布的縮放

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。