Estoy tratando de recortar una imagen para que quepa en mi margen. Un ejemplo de lo que estoy tratando de lograr.
La imagen original:
Después del cultivo:
Ya logré recortar el rectángulo, pero no tengo idea de cómo puedo quitar las esquinas. Probé con ctx.arc(), pero estoy un poco confundido con los valores que debo usar para x, y, radio y ángulo. El radio de borde que estoy usando depende del tamaño de la pantalla, pero tengo el valor.
Use clip()
con Path2D
y arcTo()
. Tendrá que averiguar sus valores específicos que se pueden hacer con un poco de matemática (o prueba y error). Asegúrese de dibujar su imagen después de clip()
let canvas = document.getElementById('canvas') let ctx = canvas.getContext('2d') canvas.width = 400; canvas.height = 400; let border = new Path2D(); border.arcTo(canvas.width, 0, canvas.width, 20, 50); border.arcTo(canvas.width, canvas.height, 0, canvas.height, 50); border.arcTo(0, canvas.height, 0, 20, 50); border.arcTo(0, 0, 20, 0, 50); ctx.clip(border); function draw() { ctx.fillStyle = 'green'; ctx.fillRect(0, 0, canvas.width, canvas.height); } draw()
<canvas id="canvas"></canvas>