为 HTML5 画布上的图像动态添加边框

【问题标题】：Adding a Border Dynamically to an Image on an HTML5 Canvas为 HTML5 画布上的图像动态添加边框
【发布时间】：2011-10-01 12:13:21
【问题描述】：

我有一个包含图像的画布，我每次都重新绘制低 1 个像素以产生坠落的效果。我有一个数组中的图像，我只是将它们降低 1 个像素而不重新创建图像。

是否可以为到达某个点的图像动态添加边框，如果可以，如何？

【问题讨论】：

【解决方案1】：

是的，你所要做的就是在图片外面画一条路径，然后调用ctx.stroke()做边框。

假设图像具有x 和y 的坐标，宽度和高度分别为w 和h，您只需：

ctx.rect(x, y, w, h);
ctx.stroke();

想要不同颜色的边框？

ctx.strokeStyle = 'blue';

厚一点？

ctx.lineWidth = 5;

【讨论】：

【解决方案2】：

如果您知道图像的大小和位置并且在绘制它们时可能知道，您可以使用.rect canvas 方法在图像周围绘制一个矩形。

【讨论】：