javascript - rica - Corte de forma irregular en la imagen

muere turista en costa rica

Question

Estoy tratando de cortar una imagen en una forma particular usando el método canvas clip ().

He seguido los siguientes pasos para hacerlo:

1. Dibuja un rectángulo.
2. Dibuja semicírculos en cada lado. Los semicírculos derecho e inferior sobresalen hacia afuera y los semicírculos izquierdo y superior están hacia adentro.

El fragmento de código se proporciona a continuación:

var canvasNode = this.hasNode();
var ctx = canvasNode && canvasNode.getContext(''2d'');

var image = new Image();
image.onload = function() {
  ctx.drawImage(image, 0, 0, 512, 384);
};

image.src = "images/image.png";
var startX = 200;
var startY = 0;

var rectWidth = 150;
var rectHeight = 150;
var radius = 30;

//Main Rect
ctx.rect(startX, startY, rectWidth, rectHeight);

//Right arc
ctx.moveTo(startX+=rectWidth, startY+=(rectHeight/2));
ctx.arc(startX, startY, radius, 3 * Math.PI / 2, Math.PI / 2, false);

//Left arc
ctx.moveTo(startX-=(rectWidth / 2), startY+=(rectHeight / 2));
ctx.arc(startX, startY, radius, 0, Math.PI, true);

ctx.moveTo(startX-=(rectWidth / 2), startY-=(rectWidth / 2));
ctx.arc(startX, startY, radius, 3 * Math.PI / 2, Math.PI / 2, false);

ctx.clip();

La imagen que estoy usando es de tamaño 800 x 600 (png). Por favor, ayúdame a entender lo que estoy haciendo mal aquí.

Answer 1

En primer lugar, ¿por qué estás usando clip ? Actualmente estás dibujando semicírculos, que funciona sin clip .

En segundo lugar, está creando caminos y recortes, pero nunca recorre el camino. Como resultado, no verá nada en la pantalla.

Si solo acaricias en lugar de clip, funciona en parte para mí: http://jsfiddle.net/r6yAN/ . Sin embargo, no incluiste el semicírculo superior.

Editar: parece que no estás usando la mejor forma de clipping. Dibujas un rectángulo, pero esto también incluye una línea en el semicírculo. Estarías mejor si dibujas cada línea / arco tú mismo de esta manera: http://jsfiddle.net/CH6qB/6/ .

La idea principal es moverse de un punto a otro como en esta imagen:

Así que primero empiece en (startX, startY) , luego una línea a (startX + lineWidth, startY) , luego un arco en (startX + rectWidth / 2, startY) de pi a 0 (en sentido antihorario), etc.

Si desea trazar el camino también después de haber dibujado la imagen, es una buena idea volver a soltarlo. De lo contrario, el trazo no será de gran calidad.

var canvasNode = document.getElementById(''cv'');
var ctx = canvasNode && canvasNode.getContext(''2d'');

var image = new Image();
image.onload = function() {
    // draw the image, region has been clipped
    ctx.drawImage(image, startX, startY);

    // restore so that a stroke is not affected by clip
    // (restore removes the clipping because we saved the path without clip below)
    ctx.restore();
    ctx.stroke();
};

image.src = "http://www.lorempixum.com/200/200/";

var startX = 200;
var startY = 0;

var rectWidth = 150;
var rectHeight = 150;
var radius = 30;

var lineWidth  = rectWidth  / 2 - radius;
var lineHeight = rectHeight / 2 - radius;

// typing pi is easier than Math.PI each time
var pi = Math.PI;

ctx.moveTo(startX, startY);

ctx.lineTo(startX + lineWidth, startY);
ctx.arc(startX + rectWidth / 2, startY,
        radius,
        pi, 0, true);
ctx.lineTo(startX + rectWidth, startY);

ctx.lineTo(startX + rectWidth, startY + lineHeight);
ctx.arc(startX + rectWidth, startY + rectHeight / 2,
        radius,
        -pi / 2, pi / 2, false);
ctx.lineTo(startX + rectWidth, startY + rectHeight);

ctx.lineTo(startX + rectWidth - lineWidth, startY + rectHeight);
ctx.arc(startX + rectWidth / 2, startY + rectHeight,
        radius,
        0, pi, false);
ctx.lineTo(startX, startY + rectHeight);

ctx.lineTo(startX, startY + rectHeight - lineHeight);
ctx.arc(startX, startY + rectHeight / 2,
        radius,
        pi/2, pi*3/2, true);
ctx.lineTo(startX, startY);

ctx.save(); // Save the current state without clip

ctx.clip();