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

Adding a Border Dynamically to an Image on an HTML5 Canvas

本文关键字：图像 添加 边框 动态 HTML5      更新时间：2023-09-26

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

是否有可能动态地为达到某一点的图像添加边界，如果是，如何添加?

是的，你所要做的就是在图像外面画一条路径，然后调用ctx.stroke()来制作边界。

假设图像的坐标为x和y，宽度和高度分别为w和h，您只需执行: 
ctx.rect(x, y, w, h);
ctx.stroke();

想要不同颜色的边框?

ctx.strokeStyle = 'blue';

厚吗?

ctx.lineWidth = 5;

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

相关文章：