扣丁學(xué)堂HTML5視頻之用三角函數在canvas上畫(huà)虛線(xiàn)的方法

本篇文章扣丁學(xué)堂HTML5培訓小編給大家介紹一下用三角函數在canvas上畫(huà)虛線(xiàn)的方法，喜歡HTML5開(kāi)發(fā)的小伙伴可以隨著(zhù)小編一起來(lái)看一下。

因為canvas的api沒(méi)有虛線(xiàn)的

所以需要自己實(shí)現

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

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

    var numDashes=Math.floor(
        Math.sqrt(deltaX*deltaX+deltay*deltay)/dashlength  //Math.sqrt返回一個(gè)數的平方根  dashlength虛線(xiàn)每個(gè)點(diǎn)的長(cháng)度
    )

    var everydashLength_x=deltaX/numDashes  //確定X軸每條虛線(xiàn)點(diǎn)的起始點(diǎn)
    var everydashLength_y=deltay/numDashes  //確定Y軸每條虛線(xiàn)點(diǎn)的起始點(diǎn)

    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)

以上就是扣丁學(xué)堂HTML5在線(xiàn)學(xué)習小編給大家分享的用三角函數在canvas上畫(huà)虛線(xiàn)的方法，希望對小伙伴們有所幫助。想要了解更多內容的小伙伴可以登錄扣丁學(xué)堂官網(wǎng)咨詢(xún)，扣丁學(xué)堂是專(zhuān)業(yè)的HTML5培訓機構，扣丁學(xué)堂不僅有專(zhuān)業(yè)的老師和與時(shí)俱進(jìn)的課程體系，還有大量的HTML5在線(xiàn)視頻供學(xué)員觀(guān)看學(xué)習，喜歡HTML5的小伙伴快快行動(dòng)吧?？鄱W(xué)堂H5技術(shù)交流群：692172929。微信號：codingbb