Вырежьте круглое изображение на холсте - PullRequest
Новая
       26

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

6 голосов
/ 02 февраля 2011

Я использую html5 canvas и создаю игру, в которой можно будет загрузить свое лицо в игру и использовать его в качестве основного персонажа.К сожалению, персонажи в игре круглые, как смайлики.

Так как бы это сделать?

Можно ли сделать снимок и вырезать из него круг, так чточто-нибудь за пределами круга будет прозрачным?Если так, как это будет сделано?

1 Ответ

6 голосов
/ 02 февраля 2011

Вы захотите сделать обтравочный контур.Этот путь будет обрезать все, что находится за пределами круга: 

ctx.save();

ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true); 
ctx.closePath();
ctx.clip();

// draw the image

ctx.restore();

Таким образом, следующая вещь (и), нарисованная на этом холсте, будет отображаться только внутри обтравочного контура.

Вы захотитечтобы сохранить и восстановить контекст до и после.

Вот еще немного по теме:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing#Clipping_paths

...