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

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

• lineJoin 創(chuàng)建拐角類型
• • bevel：創(chuàng)建斜角
  • round：創(chuàng)建圓角
  • miter：默認，創(chuàng)建尖角

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/grf0529/p/5975703.html

總結(jié)

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

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