Weil die Canvas-API keine gepunkteten Linien hat
Sie müssen es also selbst umsetzen
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===undefiniert?5:dashlength; var deltaX=x2-x1; //Die Länge einer rechtwinkligen Seite var deltay=y2-y1; //Die Länge der anderen Befehlsseite var numDashes=Math.floor( Math.sqrt(deltaX*deltaX+deltay*deltay)/dashlength //Math.sqrt gibt die Quadratwurzel einer Zahl dashlength und die Länge jedes Punktes der gestrichelten Linie zurück) var everydashLength_x=deltaX/numDashes //Bestimmen Sie jeden Punkt auf der X-Achse. Der Startpunkt der gepunkteten Linienpunkte var everydashLength_y=deltay/numDashes //Bestimmen Sie den Startpunkt jedes gestrichelten Linienpunkts auf der Y-Achse 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=3context.StrokeStyle=bluedrawDashedLine(context,20,20,context.canvas.width-20,20,20)Der Effekt ist wie in der Abbildung dargestellt
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.