HTML5 Canvas: globalCompositeOperation (gomme)

Question

Comment utiliser globalCompositeOperation pour effacer quelque chose?

http://canvaspaint.org/ a une gomme à effacer, mais c'est juste une ligne blanche - ok que si votre fond est blanc ...

Je sais que vous pouvez utiliser ctx.clearRect(). Mais cela n'a pas vraiment fonctionné pour moi car tout en faisant glisser une souris avec une gomme (définie sur 8x8px), elle ne fait que des carrés 8x8px non connectés - pas vraiment une ligne lisse.

Existe-t-il un moyen d'utiliser globalCompositeOperation comme une gomme?

Quelque chose comme:

ctx.globalCompositeOperation = "___something___"; 
ctx.beginPath(); 
ctx.lineTo(mouseX , mouseY); 
ctx.closePath(); 

Merci.

Answer 1

Oui, vous pouvez effacer en utilisant globalCompositeOperation as described here. Réglez-le simplement sur "copy" et utilisez par ex. strokeStyle = "rgba(0,0,0,0)" et cela va effacer la toile dans le coup.

Mise à jour: merci de souligner que cela ne fonctionne pas maintenant @ will-huang. Vous devez, comme mentionné, avoir globalCompositeOperation défini sur destination-out et strokeStyle sur rgba(0,0,0,1). (En fait, vous pouvez avoir des valeurs RVB, juste vous avez besoin de l'ensemble alpha à 1,0 pour effacer complètement le contenu de la course.)

Voici un exemple d'effacement: http://jsfiddle.net/FGcrq/1/

Answer 2

Je ne pense pas. Mais il suffit de changer la couleur de la ligne à quelle que soit la couleur de fond. De plus, si vous voulez des tailles d'effaceur différentes, augmentez la taille de la ligne. ctx.lineWidth=//default 1.0 et ctx.strokeStyle=//default black Je suggère également d'utiliser ctx.save() et ctx.restore() de sorte que vous n'avez pas à vous soucier de réinitialiser vos attributs de ligne.

Answer 3

ctx.globalCompositeOperation = "destination-out"; 

Cela devrait faire l'affaire . Vous pouvez également utiliser "xor" pour effacer le bien.