Tuval içinde dairesel görüntü kesiyor

Question

html5 kanvasını kullanıyorum ve bir oyun yaratıyorum çünkü yüzünüzü oyuna yükleyebilmemiz ve onu ana karakter olarak kullanabilmemiz mümkün. Maalesef oyundaki karakterler, gülen yüzler gibi daireseldir.

Peki bu nasıl yapılabilir?

Resim çekmek ve bir daire kesmek mümkün mü, daire dışında herhangi bir şey şeffaf olabilir mi? Eğer öyleyse, bu nasıl yapılır?

Answer 1

Kırpma yolu yapmak isteyeceksiniz. Bu yol bir dairenin dışındaki her şeyi keser:

ctx.save(); 

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

// draw the image 

ctx.restore(); 

Yani bunun tuval üzerine çizim sonraki şey (ler) sadece kırpma yolunun içine görünecektir.

İçeriği önceden ve sonra kaydetmek ve geri yüklemek isteyeceksiniz.

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

: Burada

konu üzerine biraz daha var