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

Question

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

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

Answer 1

是的，您只需要在图片外部绘制一条路径，然后拨打ctx.stroke()来制作边框。

所以说图片的坐标为x和y，宽度和高度为w和h，您只需这样做：

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

想要一个不同颜色的边框？

ctx.strokeStyle = 'blue';

较厚？

ctx.lineWidth = 5;

Answer 2

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