एचटीएमएल कैनवास - घुमावदार तीर बनाएं

Question

मैं एक एचटीएमएल कैनवास में घुमावदार तीर खींचने की कोशिश कर रहा हूं। मुझे घुमावदार रेखा खींचने में कोई समस्या नहीं है, लेकिन मुझे नहीं पता कि रेखा (दिशा) के अंत में > कैसे रखा जाए।

ctx.beginPath(); 
    ctx.fillStyle = "rgba(55, 217, 56,"+ opacity +")"; 
    ctx.moveTo(this.fromX,this.fromY); 
    ctx.quadraticCurveTo(this.controlX, this.controlY, this.toX, this.toY); 
ctx.stroke(); 

मेरा विचार अंत में लाइन का एक छोटा सा हिस्सा ले रहा है और एक त्रिकोण खींच रहा है। मैं लाइन में किसी बिंदु का समन्वय कैसे प्राप्त कर सकता हूं?

बेहतर समझने के लिए छवि नीचे दी गई है।

Answer 1

आप एक द्विघात वक्र का उपयोग कर रहे हैं, आप दो अंक है कि एक लाइन है कि अपने तीर सिर के "दिशा" में अंक बनाने पता:

तो नीचे फेंक ट्रिगर का एक टुकड़ा और आप अपने आप को एक समाधान है। यहाँ एक सामान्यीकृत समारोह है कि यह आप के लिए क्या करेंगे है:

http://jsfiddle.net/SguzM/

function drawArrowhead(locx, locy, angle, sizex, sizey) { 
    var hx = sizex/2; 
    var hy = sizey/2; 

    ctx.translate((locx), (locy)); 
    ctx.rotate(angle); 
    ctx.translate(-hx,-hy); 

    ctx.beginPath(); 
    ctx.moveTo(0,0); 
    ctx.lineTo(0,1*sizey);  
    ctx.lineTo(1*sizex,1*hy); 
    ctx.closePath(); 
    ctx.fill(); 

    ctx.translate(hx,hy); 
    ctx.rotate(-angle); 
    ctx.translate(-locx,-locy); 
}   

// returns radians 
function findAngle(sx, sy, ex, ey) { 
    // make sx and sy at the zero point 
    return Math.atan2((ey - sy), (ex - sx)); 
}