Ich habe diesen Code Windrichtung auf HTML-Leinwand zu zeigen:Wie füge ich meiner Canvas-Linie Rechteck/Pfeil hinzu?
var x, y, r, ctx, radians;
ctx = window.compass.getContext("2d");
radians = 0.0174533 * (10 - 90);
x = ctx.canvas.width/2;
y = ctx.canvas.height/2;
r = x * 0.8;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.beginPath();
ctx.strokeStyle = "red"
ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.lineCap = 'square';
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.lineWidth = 10;
ctx.moveTo(x, y);
ctx.lineTo(x + r * Math.cos(radians), y + r * Math.sin(radians));
ctx.stroke();
I Pfeilspitze auf den Startpunkt der Linie hinzufügen möchten, das heißt
x = ctx.canvas.width/2; y = ctx.canvas.height/2;
Wie kann ich das tun?
See [diese Antwort] (http://stackoverflow.com/questions/37471353/how- Zeichnungs-Kreis-vor-ein-Objekt-in-2d-auf-Javascript-html5-Leinwand/37473030 # 37473030) als Referenz. Folgen Sie einfach den Anweisungen zur Drehung um den Kopf und ersetzen Sie den Kreis durch einen Pfeil. – K3N
es ist stotternd hart in html canvas – QBM5
Scheint so .. Beste Sache, die ich mit kommen kann, ist, einen Kreis zu meinem Ausgangspunkt zu zeichnen, der statisch ist und ändert sich nicht, während sich meine Linie ändert. Nicht sehr gute Lösung. – Villemh