Sto utilizzando la tela HTML5 e sto creando un gioco in cui sarà possibile caricare la faccia nel gioco e utilizzarla come la caratteristica principale. Sfortunatamente, i personaggi del gioco sono circolari, come facce sorridenti.Taglia immagine circolare su tela
Quindi, come si farebbe?
È possibile scattare una foto e ritagliarne un cerchio, in modo che qualsiasi elemento esterno al cerchio sia trasparente? Se sì, come si farebbe?
Dovrai creare un tracciato di ritaglio. Questo percorso sarà ritagliare tutto al di fuori di un cerchio:
ctx.save();
ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.clip();
// draw the image
ctx.restore();
Così la prossima cosa che (s) si disegna su questa tela apparirà solo all'interno del tracciato di ritaglio.
Dovrai salvare e ripristinare il contesto prima e dopo.
Ecco un po 'di più sul tema:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing#Clipping_paths