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

Question

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

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

Answer 1

Yes, all you have to do is draw a path outside the image and call ctx.stroke() to make the border.

So say the image has the coordinates x and y, with a width and height of w and h, you just do:

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

Want a different colored border?

ctx.strokeStyle = 'blue';

Thicker?

ctx.lineWidth = 5;

Answer 2

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