Tela HTML5: riempi il cerchio con l’immagine

Come posso disegnare un’immagine all’interno di un cerchio? Se lo faccio:

context.beginPath(); context.arc((e.pageX),(e.pageY),161,0,Math.PI*2,true); context.closePath(); 

Come posso quindi usare fill () per riempirlo con la mia immagine disegnata?

L’ho fatto l’altro giorno per una cosa importante che sto facendo;

 var thumbImg = document.createElement('img'); thumbImg.src = 'path_to_image'; thumbImg.onload = function() { tmpCtx.save(); tmpCtx.beginPath(); tmpCtx.arc(25, 25, 25, 0, Math.PI * 2, true); tmpCtx.closePath(); tmpCtx.clip(); tmpCtx.drawImage(thumbImg, 0, 0, 50, 50); tmpCtx.beginPath(); tmpCtx.arc(0, 0, 25, 0, Math.PI * 2, true); tmpCtx.clip(); tmpCtx.closePath(); tmpCtx.restore(); }; 

Ha funzionato perfettamente per me.

Ecco una versione più complessa di ciò che ho realizzato che fa anche il caching delle immagini, https://jsfiddle.net/jaredwilli/ex5n5/

Non sono sicuro se stai ancora cercando la risposta, ma ecco come:

 var ctx = document.getElementById('your_canvas').getContext("2d"); //ctx.lineWidth = 13; //ctx.strokeStyle = 'rgba(0,0,0,1)'; //ctx.fillStyle="rgba(0,0,0,0)" // if using this, make sure alpha < 1 ctx.arc(100,100, 50, 0, Math.PI*2,true); // you can use any shape ctx.clip(); var img = new Image(); img.addEventListener('load', function(e) { ctx.drawImage(this, 0, 0, 200, 300); //ctx.fill(); //ctx.stroke(); }, true); img.src="/path/to/image.jpg"; 

Puoi farlo anche con pattern, ma ottieni meno flessibilità di posizionamento dell'immagine

 ctx.arc(100,100, 70, 0, Math.PI*2,true); ctx.clip(); img = new Image() img.addEventListener('load', function(e) { ctx.fillStyle = ctx.createPattern(this, 'no-repeat') ctx.fill(); }, true); img.src="/path/to/image.jpg" 

Prendi in considerazione l’utilizzo di alcune di queste alternative:

  • Utilizzando un con CSS per border-radius : http://jsfiddle.net/ChrisMorgan/BQGxA/

  • Usa SVG piuttosto che e imposta l’ellisse come tracciato di ritaglio per un’immagine. (Anche i percorsi di ritaglio più complessi sono facili)

Non sapendo più delle tue esigenze e della situazione, non so se soddisferanno le tue esigenze, ma penso che valga la pena considerarle. non è la soluzione a tutti i tuoi problemi: per molti di questi casi, i CSS in HMTL normale e / o SVG possono essere una soluzione migliore.

Il problema con il metodo clip () è che Chrome renderà i bordi non antialiasing, come mostrato in questa domanda .

Una soluzione è usare globalCompositeOperation come mostrato nella risposta di Daniel:

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