动态添加边框到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画布方法在图像周围绘制矩形。