Verwenden Sie trigonometrische Funktionen, um gepunktete Linien auf der Leinwand zu zeichnen

In diesem Artikel werden hauptsächlich relevante Informationen zur Methode zum Zeichnen gepunkteter Linien auf Leinwand mithilfe trigonometrischer Funktionen vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Da die Canvas-API keine gepunktete Linie hat

, müssen Sie sie also selbst implementieren

Wäre es übrigens nicht schön, trigonometrische Funktionen zu überprüfen

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)

Der Effekt ist wie unten gezeigt

Verwandte Empfehlungen:

html Schritte zum Implementieren eines gestrichelten Randes

So verwenden Sie Canvas. Zeichnen Sie eine gepunktete Linie

Zusammenfassung der Methoden zum Festlegen des Stils für gepunktete Linien in HTML und CSS

Das obige ist der detaillierte Inhalt vonVerwenden Sie trigonometrische Funktionen, um gepunktete Linien auf der Leinwand zu zeichnen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!