Utilisez des fonctions trigonométriques pour tracer des lignes pointillées sur la toile

Cet article présente principalement les informations pertinentes sur la méthode de dessin de lignes pointillées sur toile à l'aide de fonctions trigonométriques. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Parce que l'API Canvas n'a pas de ligne pointillée

, vous devez donc l'implémenter vous-même

Ne serait-il pas bien de revoir les fonctions trigonométriques en passant

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)

L'effet est comme indiqué ci-dessous

Recommandations associées :

html Étapes pour mettre en œuvre une bordure en pointillés

Comment utiliser Canvas Dessiner une ligne pointillée

Résumé des méthodes de définition des styles de ligne pointillée en HTML et CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!