Canvas2(關鍵詞：setLineDash?、rect?、strokeRect?、clearRect?、arc、sin?、strokeText?)

• 繪制其他樣式：
• • lineCap 結束端點的設置
  • • lineCap ?= “butt” ?默認線冒
    • lineCap ?= “round” 圓形線冒
    • lineCap ?= ?“aquare”正方形線冒

• lineJoin 創建拐角類型
• • bevel：創建斜角
  • round：創建圓角
  • miter：默認，創建尖角

• miterLimit ?設置或返回最大銜接長度，一般默認10

• 繪制虛線的方法
• • setLineDash（） ? ----表示設置虛線，參數是一個數組
  • 如果傳入一個參數， 表示虛線的實線部分和空白的部分的寬度是就是這個參數
  • 如果傳入多個參數，然后，循環交替分別來使用數組中的值來設置

• 設置線的偏移
• • lineDashoffset
  • 注意：如果設置偏移，表示虛線的起始點往左移動

• 使用 ?rect 方法來繪制矩形
• • ctx.rect(100,100,200,300) ; ??
    ctx.stroke();
  • • 第一個參數：起點的x坐標
    • 第二個參數：起點的y坐標
    • 第三個參數：繪制矩形的寬度
    • 第四個參數：繪制矩形的高度

• 直接繪制矩形
• • ctx.strokeRect(100,100,200,300 ); ?參數和上面rect的一樣

• 填充矩形
• • ctx.fillRect(100,100,200,300 ); ?參數和上面rect的一樣

• 清除矩形
• • ctx.clearRect(100,100,200,300 ); ?參數和上面rect的一樣
  • 注意：清除繪制好的矩形的時候，需要考慮邊框問題（需要多處理1像素）

• 清除整個畫布
• • 第一種方法：ctx.clearRect(0,0,cv.width,cv.height);
  • 第二種方法(重置畫布的width或者height)：設置cv.width = cv.width; 或者 cv.height = cv.height

• 繪制圓弧?
• • ctx.arc ( x, y, r, 起始的弧度，結束的弧度，counterclickwise )
  • 第一個參數：圓心的x坐標
  • 第二個參數：圓心的y坐標
  • 第三個參數：半徑
  • 第四個參數：開始的弧度
  • 第五個參數：結束的弧度
  • 第六個參數：繪制的方向（順時針/逆時針）

• 弧度：Math.sin(弧度)/Math.cos(弧度)
• 在js中，所有跟角度有關的函數或者屬性，都是通過弧度來計算的
• 公式：angle/180 = 弧度/Math.PI
• 角度轉弧度：angle/180*Math.PI
• 弧度轉角度：radian/Math.PI*180

// 角度轉弧度 function toRadian(angle) { return angle / 180 * Math.PI; } // 弧度轉角度 function toAngle(radian) { return radian / Math.PI * 180; }

• 繪制扇形
• moveTo ?到圓心
• 繪制圓弧
• 如果是 fill 這時候扇形就繪制完畢了，如果是stroke ，最簡單的處理方式：closePash（）；

• 繪制文字
• • strokeText（text，x，y）；
    fillText（text，x，y）；
  • • 第一個參數：要繪制的問題內容
    • 第二個參數：表示繪制到畫布中的x坐標
    • 第三個參數：表示繪制到畫布中的y坐標

• • 繪制文字的對齊方式
  • • ctx.textAlign = "start" ?是默認值
    • ctx.textAlign = "left"?
    • ctx.textBaseLine = "middle";

• • measureText（） ? 作用：計算文本的寬度

// 這個方法的返回值：對象，要獲取文字的寬度，就訪問對象的 width 屬性 textWidth = ctx.measureText(value.title).width;

轉載于:https://www.cnblogs.com/grf0529/p/5975703.html

總結

以上是生活随笔為你收集整理的Canvas--2的全部內容，希望文章能夠幫你解決所遇到的問題。

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