扣丁學堂HTML5視頻之用三角函數在canvas上畫虛線的方法

本篇文章扣丁學堂HTML5培訓小編給大家介紹一下用三角函數在canvas上畫虛線的方法，喜歡HTML5開發的小伙伴可以隨著小編一起來看一下。

因為canvas的api沒有虛線的

所以需要自己實現

順便復習一下三角函數豈不美滋滋

var context=document.getElementById("canvas").getContext("2d");
function drawDashedLine(context,x1,y1,x2,y2,dashlength){
    dashlength=dashlength===undefined?5:dashlength;
    var deltaX=x2-x1; //一條直角邊的長
    var deltay=y2-y1; //另一條指教邊的長

    var numDashes=Math.floor(
        Math.sqrt(deltaX*deltaX+deltay*deltay)/dashlength  //Math.sqrt返回一個數的平方根  dashlength虛線每個點的長度
    )

    var everydashLength_x=deltaX/numDashes  //確定X軸每條虛線點的起始點
    var everydashLength_y=deltay/numDashes  //確定Y軸每條虛線點的起始點

    for(var i=0;i<numDashes;i++){
        context[i%2===0?'moveTo':"lineTo"]
        (x1+everydashLength_x*i,y1+everydashLength_y*i)
    }
    context.stroke()

}
context.lineWidth=3
context.strokeStyle="blue"
drawDashedLine(context,20,20,context.canvas.width-20,20,20)

以上就是扣丁學堂HTML5在線學習小編給大家分享的用三角函數在canvas上畫虛線的方法，希望對小伙伴們有所幫助。想要了解更多內容的小伙伴可以登錄扣丁學堂官網咨詢，扣丁學堂是專業的HTML5培訓機構，扣丁學堂不僅有專業的老師和與時俱進的課程體系，還有大量的HTML5在線視頻供學員觀看學習，喜歡HTML5的小伙伴快快行動吧。扣丁學堂H5技術交流群：692172929。微信號：codingbb