动态添加边框到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;