2016-06-01 24 views
0

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?

+0

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

+0

es ist stotternd hart in html canvas – QBM5

+0

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

Antwort

0

einen wiederverwendbaren Wind-Pfeil zu erstellen ist recht einfach:

  1. Erstellen Sie Ihren beschatteten Pfeil auf eine In-Memory-Leinwand:

    var memCanvas=document.createElement('canvas') 
    
  2. Zeichnen Sie die In-Memory-Leinwand auf die sichtbare Leinwand:

    ctx.drawImage(memCanvas,x,y); 
    

enter image description hereenter image description here

Hier ist Beispielcode und eine Demo:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var cx=150; 
 
var cy=150; 
 
var angle=0; 
 

 
var arrow=makeArrow(100,10,20,20,'red',4); 
 

 
requestAnimationFrame(animate); 
 

 
function animate(time){ 
 
    ctx.clearRect(0,0,cw,ch); 
 
    drawArrow(cx,cy,angle); 
 
    angle+=Math.PI/180; 
 
    requestAnimationFrame(animate); 
 
} 
 

 
function drawArrow(cx,cy,radianAngle){ 
 
    ctx.translate(cx,cy); 
 
    ctx.rotate(radianAngle); 
 
    ctx.drawImage(arrow,-arrow.width/2,-arrow.height/2); 
 
    ctx.rotate(-radianAngle); 
 
    ctx.translate(-cx,-cy); 
 
} 
 

 
function makeArrow(length,lineHeight,arrowLength,arrowHeight,fillcolor,shadowoffset){ 
 
    var lineTop=(arrowHeight-lineHeight)/2; 
 
    var arrowLeft=length-arrowLength; 
 
    var c=document.createElement('canvas'); 
 
    var ctx=c.getContext('2d'); 
 
    c.width=length+shadowoffset; 
 
    c.height=arrowHeight+shadowoffset; 
 

 
    ctx.shadowOffsetX = shadowoffset; 
 
    ctx.shadowOffsetY = shadowoffset; 
 
    ctx.shadowBlur = 2; 
 
    ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; 
 
     
 
    ctx.beginPath(); 
 
    ctx.moveTo(0,lineTop); 
 
    ctx.lineTo(arrowLeft,lineTop); 
 
    ctx.lineTo(arrowLeft,0); 
 
    ctx.lineTo(length,arrowHeight/2); 
 
    ctx.lineTo(arrowLeft,arrowHeight); 
 
    ctx.lineTo(arrowLeft,lineTop+lineHeight); 
 
    ctx.lineTo(0,lineTop+lineHeight); 
 
    ctx.closePath(); 
 
    ctx.fillStyle=fillcolor; 
 
    ctx.fill(); 
 
    return(c); 
 
}
body{ background-color:white; padding:10px; } 
 
canvas{border:1px solid red; margin:0 auto; }
<canvas id="canvas" width=300 height=300></canvas>

Verwandte Themen