0
307
Views¿Cómo puedo eliminar/recortar el ángulo de las esquinas de alguna imagen?
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.
·
Santiago Gelvez
1 answers
Answer question0
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>
·
Santiago Gelvez
Report
Answer question