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);