Добавление границы к изображению динамически на холсте HTML5

Question

У меня есть холст с изображениями, я каждый раз перерисовываю на 1 пиксель ниже, чтобы получить эффект падения. У меня есть изображения в массиве, и я просто помещаю их на 1 пиксель ниже, не воссоздавая изображение.

Можно ли динамически добавить границу к изображениям, которые достигают определенной точки, и если да, то как?

Answer 1

Да, все, что вам нужно сделать, это нарисовать путь за пределами изображения и вызвать ctx.stroke(), чтобы сделать границу.

Допустим, изображение имеет координаты x и y, ширину и высоту w и h, просто введите:

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

Хотите другую цветную рамку?

ctx.strokeStyle = 'blue';

Thicker

ctx.lineWidth = 5;

Answer 2

Если вы знаете размер и местоположение ваших изображений и, как вы рисуете их, вы, вероятно, знаете, вы можете использовать метод .rect canvas, чтобы нарисовать прямоугольник вокруг изображения.