propiedad - ¿Cómo alise los bordes del clip() en el lienzo html5 en Chrome Windows?

propiedad clip path

Question

Estoy usando la función clip () en un lienzo.

Resultados:

Como puede ver, la versión de Chrome tiene jaggies / alias horribles a lo largo de los bordes. ¿Cómo puedo solucionar esto?

Código para reproducir:

http://jsfiddle.net/ZRA76/ :

<canvas id="test" width="300" height="300"></canvas>​

<script type="text/javascript">
    cv = document.getElementById("test");
    ctx = cv.getContext("2d");

    var im = new Image();
    im.onload = function () {
        ctx.beginPath();
        ctx.arc(110, 110, 100, 0, 2*Math.PI, true);
        ctx.clip();
        ctx.drawImage(im, 0, 0);
    }
    im.src = "http://placekitten.com/300/300";
</script>

Answer 1

Me encontré con el mismo problema con Chrome y clip ().

En mi caso logré una mejor compatibilidad con el navegador configurando el lienzo globalCompositeOperation.

context.globalCompositeOperation = ''source-atop'';

Así que dibuja tu forma, un círculo en este caso. Luego cambia a ''fuente-atop'' y dibuja la imagen de tu gatito.

Tenga en cuenta que esta es una solución rápida para el dibujo básico y supone un lienzo en blanco. El lienzo anterior afectará su clip.

Answer 2

Mi solución para esto es dibujar un trazo blanco delgado (2px) en el mismo radio después de dibujar la imagen. Cubre muy bien el alias y se ve bien en todos los navegadores.

Answer 3

Si está haciendo un dibujo complejo en capas, puede usar globalCompositeOperation para emular el recorte en un segundo lienzo de scratch. A continuación, puede usar drawImage para copiar el lienzo scratch en el lienzo original. No puedo garantizar el rendimiento de este enfoque, pero es la única manera que conozco para obtener lo que desea.

//set-up - probably only needs to be done once
var scratchCanvas = document.createElement(''canvas'');
scratchCanvas.width = 100;
scratchCanvas.height = 100;
var scratchCtx = scratchCanvas.getContext(''2d'');


//drawing code
scratchCtx.clearRect(0, 0, scratchCanvas.width, scratchCanvas.height);

scratchCtx.globalCompositeOperation = ''source-over''; //default

//Do whatever drawing you want. In your case, draw your image.
scratchCtx.drawImage(imageToCrop, ...);


//As long as we can represent our clipping region as a single path, 
//we can perform our clipping by using a non-default composite operation.
//You can think of destination-in as "write alpha". It will not touch
//the color channel of the canvas, but will replace the alpha channel.
//(Actually, it will multiply the already drawn alpha with the alpha
//currently being drawn - meaning that things look good where two anti-
//aliased pixels overlap.)
//
//If you can''t represent the clipping region as a single path, you can
//always draw your clip shape into yet another scratch canvas.

scratchCtx.fillStyle = ''#fff''; //color doesn''t matter, but we want full opacity
scratchCtx.globalCompositeOperation = ''destination-in'';
scratchCtx.beginPath();
scratchCtx.arc(50, 50, 50, 0, 2 * Math.PI, true);
scratchCtx.closePath();
scratchCtx.fill();


//Now that we have a nice, cropped image, we can draw it in our
//actual canvas. We can even draw it over top existing pixels, and
//everything will look great!

ctx.drawImage(scratchCanvas, ...);

La razón por la que hacemos esto en un lienzo de inicio es que el destino es una operación bastante destructiva. Si ya había dibujado algunas cosas en el lienzo principal (quizás dejó un degradado agradable en el fondo) y luego quería dibujar una imagen recortada, el círculo de recortes también recortaría todo lo que ya había dibujado. Por supuesto, si su situación particular es más simple (tal vez TODO lo que desea dibujar es una imagen recortada), puede renunciar al lienzo de rayado.

Puedes jugar con los diferentes modos de recorte en mi página de demostración . La fila inferior (con los degradados) no es demasiado útil para usted, pero la fila superior (con el círculo y el cuadrado) es mucho más relevante.

editar

Vaya, accidentalmente bifurqué tu JSFiddle para demostrar la técnica.

Answer 4

Use svg clip. Funciona como un encanto pero no es tan conveniente de usar.

Answer 5

de las respuestas a ¿Puedo desactivar el antialiasing en un elemento HTML <canvas>? parece que es específico del navegador. Incluso es un informe de error activo en el proyecto Google Code Chrome. Lo siento, pero parece que no tienes suerte por ahora.