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

Question

我有一个画布，其中包含图像，我每次向下重新绘制1个像素，以产生掉落的效果。 我已经将这些图像放在一个数组中，并且只需将它们向下移动1个像素，而无需重新创建图像。

如果图像到达某一点时需要动态添加边框，则是否可能？如果是，如何实现？

- Dexter

Answer 1

是的，您只需要在图像外绘制路径并调用ctx.stroke()即可创建边框。

假设图像具有坐标x和y，宽度和高度为w和h，则只需执行以下操作：

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

想要不同颜色的边框吗？

ctx.strokeStyle = 'blue';

更粗?

ctx.lineWidth = 5;

- Simon Sarris

Answer 2

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

- Variant