將邊框添加到畫布元素

Question

我在畫布上繪製了一些箭頭（類似的箭頭可以在生命週期中查看）。我想單獨爲所有這些箭頭繪製邊框，就像我們添加到div一樣。我嘗試使用筆畫風格和筆畫方法，但它填充了我的整個箭頭。

我正在使用填充樣式並填充顏色到我的箭頭。

有沒有辦法做到這一點？它是否像填充和筆畫方法永遠不能一起使用？

Answer 1

你將不得不使用調用beginPath（）和closePath（）在畫布的背景下（「CTX」到這裏），然後填充（）來實際填充元素：

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 

ctx.beginPath(); 
ctx.moveTo(170, 80); 
ctx.lineTo(300,150); 
ctx.lineTo(100,150); 
ctx.lineTo(170, 80); 
// Etc, Make your movements to draw the arrow, here. 
ctx.closePath(); 

//Line settings and drawing 
ctx.lineWidth = 5; 
ctx.strokeStyle = 'blue'; 
ctx.stroke(); 

//Fill settings and drawing 
ctx.fillStyle = '#8ED6FF'; 
ctx.fill();