Cortar una imagen circular en lienzo

Question

Estoy usando lienzo html5, y estoy creando un juego en el que sería posible cargar tu cara en el juego y utilizarla como el personaje principal. Desafortunadamente, los charactars en el juego son circulares, como caras sonrientes.

Entonces, ¿cómo se haría esto?

¿Es posible tomar una fotografía y cortar un círculo de forma que todo lo que esté fuera del círculo sea transparente? Si es así, ¿cómo se haría esto?

Answer 1

Querrá hacer un trazado de recorte. Este camino se enganchará todo fuera de un círculo:

ctx.save(); 

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

// draw the image 

ctx.restore(); 

Así que la siguiente cosa (s) se dibuja en este lienzo sólo aparecerá dentro de la ruta de recorte.

Querrá guardar y restaurar el contexto antes y después.

Aquí es un poco más sobre el tema:

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