HTML5画布绘制带内嵌边框的图像

Question

我有一个画布，我在其中绘制图像：

drawImage(...);

如何为该图像添加内联笔划？

Answer 1

由于您未显示实际用作drawImage（）方法参数的内容，因此答案将适用于两种情况：

如果图像覆盖整个画布，您可以使用以下内容：

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