Karena canvas api tidak mempunyai garis putus-putus
Jadi, Anda perlu menerapkannya sendiri
Bukankah menyenangkan untuk meninjau fungsi trigonometri?
var konteks=dokumen.getElementById(kanvas).getContext(2d);fungsi drawDashedLine(konteks,x1,y1,x2,y2,dashlength){ dashlength=dashlength===tidak terdefinisi?5:dashlength; //Panjang sisi siku-siku var deltay=y2-y1; //Panjang sisi instruksi lainnya var numDashes=Math.floor( Math.sqrt(deltaX*deltaX+deltay*deltay)/dashlength //Math.sqrt mengembalikan akar kuadrat dari panjang garis putus-putus dan panjang setiap titik pada garis putus-putus) var everydashLength_x=deltaX/numDashes //Tentukan setiap titik pada sumbu X Titik awal titik garis putus-putus var everydashLength_y=deltay/numDashes //Tentukan titik awal setiap titik garis putus-putus pada sumbu Y for(var i=0;i<numDashes;i++){ konteks[i%2===0?'moveTo':lineTo] (x1+everydashLength_x* i,y1 +setiapdashLength_y*i) } konteks.stroke()}context.lineWidth=3context.strokeStyle=bluedrawDashedLine(konteks,20,20,konteks.kanvas.lebar-20,20,20)Efeknya seperti yang ditunjukkan pada gambar
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.