使用Javascript線繪製箭頭至

Question

我目前正試圖在我的畫布語音泡泡元素下繪製一個箭頭。

我的問題：

箭頭的右側似乎是路不再那麼左側。

有什麼我想：

我試圖創建下列方式箭頭：這似乎工作，因爲在這裏可以看到

ctx.moveTo(x, y); 
ctx.lineTo(30, 30); 
ctx.lineTo(50, 10); 

：https://jsfiddle.net/eefja4kk/1/

但是無論我嘗試什麼，我都無法讓它在我目前的代碼中工作。我感謝任何形式的幫助和建議。

我當前的代碼：

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext("2d"); 
 
ctx.font = "12px Helvetica"; 
 
var text = 'Speechbubble Speechbubble Speechbubble'; 
 
var fontHeight = getTextHeight(text, ctx.font); 
 
component(ctx, ctx.measureText(text).width, fontHeight, "#37f", 10, 10, 16, text); 
 

 
function component(ctx, width, height, color, x, y, radius, text) 
 
{ 
 
    var r = radius; 
 
    var w = width + 40; 
 
    var h = height + 40; 
 
    var pi2 = Math.PI * 2; 
 
    var ap = w * 0.15; 
 
    var aw = 5; 
 
    var ah = 10; 
 

 
    ctx.beginPath(); 
 
    ctx.arc(r, r, r, pi2 * 0.5 , pi2 * 0.75); 
 
    ctx.arc(w - r, r, r, pi2 * 0.75, pi2); 
 
    ctx.arc(w - r, h - r, r, 0, pi2 * 0.25); 
 

 
    // Speechbubble arrow 
 
    ctx.lineTo(w - ap, h); 
 
    ctx.lineTo(w - (ap * 2), h + ah); 
 
    ctx.lineTo(w - (ap * 2) - (aw * 2), h); 
 

 
    ctx.arc(r , h - r, r, pi2 * 0.25, pi2 * 0.5); 
 
    ctx.fillStyle = '#37f'; 
 
    ctx.fill(); 
 

 
    // Text fillstyle 
 
    ctx.fillStyle = "#fff"; 
 
    ctx.fillText(text, w - ctx.measureText(text).width - 20, h - fontHeight - 10); 
 
} 
 

 
function getTextHeight(txt, font) 
 
{ 
 
    var el = document.createElement('div'), height; 
 
    el.style.cssText = "position:fixed; padding:0; left:-9999px; top:-9999px; font:" + font; 
 
    el.textContent = txt; 
 

 
    document.body.appendChild(el); 
 
    height = parseInt(getComputedStyle(el).getPropertyValue('height'), 10); 
 
    document.body.removeChild(el); 
 

 
    return height; 
 
}

<canvas width="500" height="500" id="canvas"></canvas>

Answer 1

你的計算是關閉。你可以把它改成下面讓箭頭是正確的：

// Speechbubble arrow 
ctx.lineTo(w - ap, h); 
ctx.lineTo(w - (ap * 2), h + ah); 
ctx.lineTo(w - (ap * 3), h); 

Here is a working example

---

說了這麼多，你的變量命名建議，也許不是你想要的。我認爲aw意味着是箭頭的寬度，在這種情況下，你可以使用：

// Speechbubble arrow 
ctx.lineTo(w - ap, h); 
ctx.lineTo(w - ap - (aw/2), h + ah); 
ctx.lineTo(w - ap - aw, h); 

但我建議你再改，你aw到更大的東西，也許20，as per this example。

---

很難說肯定不知道你的變量是代表什麼（即什麼是ap真正意思是什麼？在我的例子中它充當偏移的箭頭開始），但你得到的想法，希望我的解決方案讓你回到正軌。