HTML5 畫布繪制帶有內嵌邊框的圖像

Question

我有一個畫布，用於繪制圖像：

drawImage(...);

如何向該圖像添加內嵌筆划？

Answer 1

由於您沒有顯示實際用作 drawImage() 方法參數的內容，因此對於兩種情況，答案是通用的：

如果圖像覆蓋整個畫布，您可以使用以下內容：

ctx.beginPath(); 
ctx.strokeStyle = '#f00';  // some color/style
ctx.lineWidth = 2;         // thickness
ctx.strokeRect(0, 0, ctx.canvas.width, ctx.canvas.height);

繪制圖像后。

如果您對圖像使用不同的大小和位置，只需為strokeRect()方法使用相同的值：

ctx.drawImage(img, 100, 100, 250, 100);
ctx.strokeRect(100, 100, 250, 100);

或者

ctx.drawImage(img, x, y, w, h, 100, 100, 250, 100);
ctx.strokeRect(100, 100, 250, 100);