Cuando cae una esfera me gustaría poner imágenes adentro pero no funciona con el render de fillStyle solo puedo colorear, ahora con sprite puedo pero no encajan en el círculo a menos que la imagen sea redondeada, ¿cómo podría redondear el imagen con javascript y matter.js
el código:
return Matter.Bodies.circle(280, 40, 11, { restitution: 0.5, render: { // fillStyle: '#F00', // strokeStyle: 'black', // lineWidth: 3, sprite: { texture: img, xScale: 0.3, yScale: 0.3, } } }); img obtener imágenes cuadradas de ticktok, que no sé cómo hacer la ronda
No estoy 100% seguro, si esta es la mejor manera de hacerlo (para su caso de uso) , pero podría:
crear un elemento de canvas de ayuda:
<canvas id='helper-canvas'></canvas> o let canvas = document.createElement('canvas');
establecer el ancho/alto del lienzo (ancho = ancho de textura deseado)
... canvas.width='100'; canvas.height='100'; ... dibuje la imagen en un elemento de canvas (usando el context ).
... ctx.drawImage(img, 0, 0); // "img" is a HtmlImageElement ...establezca el modo compuesto y dibuje un círculo que debe tener el tamaño deseado
... ctx.globalCompositeOperation='destination-in'; ctx.beginPath(); ctx.arc(img.width/2,img.width/2,img.width/2,0,Math.PI*2); ctx.closePath(); ctx.fill(); ...generar la url de la nueva "crear imagen"
... let imgUrl = img.toDataURL('image/png'); ...Y que simplemente crear el cuerpo-materia , con esa nueva imagen:
Matter.Bodies.circle(280, 40, 11, { restitution: 0.5, render: { sprite: { texture: imgUrl, xScale: 0.3, yScale: 0.3, } } });