欧美成人午夜免费全部完,亚洲午夜福利精品久久,а√最新版在线天堂,另类亚洲综合区图片小说区,亚洲欧美日韩精品色xxx

扣丁學(xué)堂HTML5培訓(xùn)簡(jiǎn)述利用三角函數(shù)在canvas上畫虛線的方法

2019-09-26 11:14:00 5792瀏覽

因?yàn)閏anvas的api沒有虛線，所以需要自己實(shí)現(xiàn)，本篇文章扣丁學(xué)堂HTML5培訓(xùn)小編就給讀者們簡(jiǎn)單分享一下利用三角函數(shù)在canvas上畫虛線的方法，感興趣的小伙伴就隨小編來(lái)了解一下吧。

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

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

    var everydashLength_x=deltaX/numDashes  //確定X軸每條虛線點(diǎn)的起始點(diǎn)
    var everydashLength_y=deltay/numDashes  //確定Y軸每條虛線點(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在線學(xué)習(xí)小編給大家分享的利用三角函數(shù)在canvas上畫虛線的方法，希望對(duì)小伙伴們有所幫助，想要了解更多內(nèi)容的小伙伴可以登錄扣丁學(xué)堂官網(wǎng)咨詢。

想要學(xué)好HTML5開發(fā)小編給大家推薦口碑良好的扣丁學(xué)堂，扣丁學(xué)堂有專業(yè)老師制定的HTML5學(xué)習(xí)路線圖輔助學(xué)員學(xué)習(xí)，此外還有與時(shí)俱進(jìn)的HTML5課程體系和HTML5視頻教程供大家學(xué)習(xí)，想要學(xué)好HTML5開發(fā)技術(shù)的小伙伴快快行動(dòng)吧。扣丁學(xué)堂H5技術(shù)交流群：673883249。

     【關(guān)注微信公眾號(hào)獲取更多學(xué)習(xí)資料】        【掃碼進(jìn)入HTML5前端開發(fā)VIP免費(fèi)公開課】  

查看更多關(guān)于“HTML5開發(fā)技術(shù)資訊”的相關(guān)文章>>