HTML5 Canvas绘制带内联边框的图像答案

【问题标题】：HTML5 canvas draw image with inline borderHTML5 Canvas绘制带内联边框的图像
【发布时间】：2014-06-08 21:22:37
【问题描述】：

我有一个画布，用于绘制图像：

drawImage(...);

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

【问题讨论】：

标签： javascript canvas html5-canvas

【解决方案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);

【讨论】：

我需要的是图像上的边框，而不是画布。
@DanielRibeiro 查看更新的答案（drawImage(...); 没说那么多..）
完美运行。谢谢。