Heim > Artikel > Web-Frontend > 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?'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)
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!