Закругленные углы на изображениях на холсте

Question

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

Любая помощь будет оценена.

Answer 1

Вместо использования глобального оператора, определите пространство, которое вы хотите, чтобы изображение занимало (которое должно быть путем, который является прямоугольником, за исключением закругленных углов)

Затем поместите этот путь в контекстперед тем как нарисовать изображение, вызовите .clip (), а затем нарисуйте изображение.

Затем изображение будет нарисовано с закругленными углами по двум углам изображения.

Так что вашнастоящая задача сейчас состоит в том, чтобы найти путь, который вам нужен.

Короче говоря:

ctx.save();
ctx.beginPath();
// use lineTo and BezierTo here to make the path you want, which is a rectangle the size of the image with two rounded corners.
ctx.closePath();
ctx.clip();

// draw the image
ctx.restore(); // so clipping path won't affect anything else drawn afterwards