Come anti-alias bordi della clip () nella canvas html5 in Chrome Windows?

Sto usando la funzione clip () su una canvas.

risultati: utilizzando la clip di tela in vari browser

Come puoi vedere la versione cromata presenta orli / alias orribili lungo i bordi. Come posso risolvere questo?

Codice da riprodurre:

http://jsfiddle.net/ZRA76/ :

​  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";  

Se stai facendo un disegno complesso a strati, puoi utilizzare globalCompositeOperation per emulare il ritaglio in una seconda area di lavoro. È quindi ansible utilizzare drawImage per copiare nuovamente l’area di lavoro nella canvas originale. Non posso garantire le prestazioni di questo approccio, ma è l’unico modo che conosco per ottenere quello che vuoi.

 //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, ...); 

Il motivo per cui lo facciamo su una canvas antigraffio è che la destinazione in ingresso è un’operazione piuttosto distruttiva. Se avevi già disegnato alcune cose nella canvas principale (forse hai messo un gradiente gradevole sullo sfondo), e poi volevi disegnare un’immagine ritagliata, il cerchio di ritaglio avrebbe anche ritagliato tutto ciò che avevi già disegnato. Naturalmente, se la tua situazione particolare è più semplice (forse TUTTI quelli che vuoi disegnare è un’immagine ritagliata), puoi rinunciare alla canvas antigraffio.

Puoi giocare con le diverse modalità di ritaglio sulla mia pagina demo . La riga in basso (con i gradienti) non è troppo utile per te, ma la riga in alto (con il cerchio e il quadrato) è molto più rilevante.

modificare

Ops, ho biforcuto per sbaglio il tuo JSFiddle per dimostrare la tecnica.

La mia correzione è di disegnare un tratto bianco (2px) sottile allo stesso raggio dopo aver disegnato l’immagine. Copre bene l’aliasing e sembra a posto tra i browser.

Ho trovato lo stesso problema con Chrome e clip ().

Nella mia circostanza ho raggiunto una migliore compatibilità con il browser impostando canvas globalCompositeOperation.

 context.globalCompositeOperation = 'source-atop'; 

Quindi disegna la tua forma, un cerchio in questo caso. Quindi passa a “source-atop” e disegna l’immagine del tuo gattino.

Nota, questa è una soluzione rapida per il disegno di base e presuppone una canvas bianca. Il disegno su canvas precedente influirà sulla tua clip.

dalle risposte su Posso distriggersre l’antialias su un elemento HTML? sembra che sia specifico per il browser. È anche un bug report attivo sul progetto google code chromium. Scusate, ma sembra che per il momento non abbiate fortuna.

Usa la clip svg. Funziona come un fascino ma non è così conveniente da usare.