Toile HTML5 - Remplir un cercle avec l'image

Question

Comment puis-je dessiner une image dans un cercle? Si oui:

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

Comment puis-je utiliser fill() pour le remplir avec mon image dessinée?

Answer 1

Je l'ai ceci l'autre jour pour une grande chose que je fais;

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(); 
}; 

Travaillé parfait pour moi.

est ici une version plus complexe de ce que je fait qui ne cache d'image aussi, https://jsfiddle.net/jaredwilli/ex5n5/

Answer 2

N'est-ce pas la méthode fill()? http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#complex-shapes-(paths)

Answer 3

Pensez à utiliser certaines de ces alternatives:

• L'utilisation d'un <img> avec CSS pour border-radius: http://jsfiddle.net/ChrisMorgan/BQGxA/

• Utiliser SVG plutôt que <canvas> et définissez l'ellipse comme le chemin de détourage pour une image. (Chemins de détourage plus complexes sont alors faciles, trop)

Ne pas savoir plus sur vos besoins et de la situation, je ne sais pas si ceux-ci répondront à vos besoins, mais je pense qu'ils valent tout en tenant compte. <canvas> n'est pas la solution à tous vos problèmes - pour beaucoup de ces cas, CSS en HMTL normal et/ou SVG peut être une meilleure correspondance.

Answer 4

Je ne sais pas si vous êtes à la recherche toujours la réponse, mais voici comment:

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

Vous pouvez aussi le faire avec motif, mais vous obtenez moins de souplesse de positionnement de l'image

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" 

Answer 5

Le problème avec la méthode clip() est que Chrome va rendre les frontières non anticrénelage, comme le montre this question.

Une solution consiste à utiliser globalCompositeOperation comme indiqué dans la réponse de Daniel: « Comment puis-je puis utiliser fill() pour le remplir avec mon image dessinée »

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