Rumah > hujung hadapan web > tutorial js > 利用三角函数在canvas上画虚线

利用三角函数在canvas上画虚线

小云云
Lepaskan: 2018-01-13 11:21:17
asal
1342 orang telah melayarinya

本文主要介绍了利用三角函数在canvas上画虚线的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

因为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?&#39;moveTo&#39;:"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)
Salin selepas log masuk

效果如图

相关推荐:

html 边框虚线的实现步骤

怎么使用Canvas绘制虚线

html和css中设置虚线样式的方法总结

Atas ialah kandungan terperinci 利用三角函数在canvas上画虚线. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Isu terkini
lukisan javascript-canvas
daripada 1970-01-01 08:00:00
0
0
0
URL tidak boleh dimasukkan
daripada 1970-01-01 08:00:00
0
0
0
javascript - canvas crop kawasan kosong
daripada 1970-01-01 08:00:00
0
0
0
javascript - canvas clearRect gagal dikosongkan
daripada 1970-01-01 08:00:00
0
0
0
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan