canvas學習筆記(二)

創建矩形

1. rect(x , y , width , height)
   • x , y 是矩形左上角的座標位置
   • width和height是矩形的寬和高，單位爲像素。
   • 該方法只規劃了所繪製矩形的路徑，並沒有填充和描邊
2. strokeRect(x , y , width , height)
   • 參數含義與rect( )方法相同
   • 該方法在在規劃完矩形路徑後會立即進行描邊，不必再寫stroke( )方法
3. fillRect(x , y , width , height)
   • 參數含義與rect( )方法相同
   • 方法執行完成後。立即對當前矩形進行fill填充
4. clearRect(x , y , width , height):清除某個矩形內的繪製內容，相當於橡皮擦

繪製圓形

1. arc(x , y , r , sAngle , eAngle , counterclockwise)
   • x , y 指的是圓心座標
   • r指的是半徑
   • sAngle:繪製開始的角度，注意是弧度，圓心到最右邊點是 0 度，順時針方向弧度增大
   • eAngel:結束的角度，注意是弧度
   • counterclockwise：是否是逆時針。true 是逆時針，false：順時針
2. 弧度和角度的轉換公式： rad = deg * Math.PI / 180;
3. 圓上面點的座標計算公式：
   • Math.sin(弧度)
   • Math.cos(弧度)
   • x = x0 + Math.cos(rad) * R
     • x0: 圓心的x軸方向上的座標
     • R：指的是圓心到要計算的點的直線距離
     • rad：該值爲弧度值，指的是所計算的點與圓心的連線和x軸正方向的夾角的弧度值。
   • y = y0 + Math.sin(rad) * R
     • y0: 圓心在y軸上的座標，其餘的同上

繪製上下文的文字屬性

1. font 設置或返回文本內容的當前字體屬性,例如:ctx.font = “18px ‘微軟雅黑’”;
2. textAlign 設置或返回文本內容的當前對齊方式,有以下屬性值：
   • start : 默認。文本在指定的位置開始。
   • end : 文本在指定的位置結束。
   • center: 文本的中心被放置在指定的位置
   • left : 文本左對齊。
   • right : 文本右對齊。
3. textBaseline 設置或返回在繪製文本時使用的當前文本基線
   • alphabetic ： 默認。文本基線是普通的字母基線
   • top ： 文本基線是 em 方框的頂端
   • hanging ： 文本基線是懸掛基線
   • middle ： 文本基線是 em 方框的正中。
   • ideographic： 文本基線是 em 基線。
   • bottom ： 文本基線是 em 方框的底端
4. fillText( )：在畫布上繪製被填充的文本
5. strokeText( )：在畫布上繪製文本(無填充)
6. measureText( )：返回包含指定文本寬度的對象

繪製圖片

1. drawImage(img , x , y)：基本圖片繪製
   • x , y 繪製圖片左上角的座標， img是繪製圖片的dom對象
2. drawImage(img , x , y , width , height)：
   • 該方法用於在畫布上繪製圖片，並指定寬高
   • 如果指定寬高，最好成比例，不然圖片會被拉伸
   • 設置高 = 原高度 * 設置寬/ 原寬度
3. drawImage(img, sx , sy , swidth , sheight , x , y , width , height)
   • 該方法用於圖片裁剪
   • sx , sy 裁剪的左上角座標，
   • swidth：裁剪圖片的高度。 sheight:裁剪的高度

本文摘錄自老馬前端canvas學習筆記，如有侵權，請聯繫刪除