Je travaille sur une application Doodling dans HTML5 et je voudrais faire une sorte de fonctionnalité de seau. L'idée est de dessiner un chemin et il sera fermé et rempli de la couleur sélectionnée (couleur de la course). Cela fonctionne bien avec des couleurs solides, mais si je veux avoir un trait transparent et remplir, je rencontre ce problème:
Ce qui se passe est le remplissage est effectué jusqu'au milieu de la course (le point d'échantillonnage réel du trajet), il y a donc une ligne de la moitié de la taille de la traite à l'intérieur de la forme qui est plus sombre parce que c'est l'intersection du remplissage et le coup.
Vous devriez être capable de voir ce que je parle de vivre dans
3 Réponses :
Bien sûr, utilisez Comme: Http://jsfiddle.net/ucyx4/ p> (Sortez cette ligne afin de voir le problème que vous rencontrez) p> En supposant que ce n'est pas la seule chose tirée sur toile, vous allez probablement devoir dessiner ceci à une toile temporaire, puis dessiner cette toile sur votre normale, sinon elle peut ruiner toutes les formes dessinées précédemment. Donc, vous auriez besoin d'un système comme: http://jsfiddle.net/datfj/ p> Modifier: Code collé dans le cas d'une défaillance Jsfiddle: p> HTML: p> script: p> CTX.GLOBALCOMPOSITEOPERATION = 'Destination-Atop'; Code> et il devrait avoir l'air de voir la façon dont vous attendez. var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
var can2 = document.createElement('canvas');
can2.width = can.width;
can2.height = can.height;
ctx2 = can2.getContext('2d');
ctx.strokeStyle = 'rgba(0,0,0,0.7)';
ctx.fillStyle = 'rgba(0,0,0,0.7)';
ctx.lineWidth = 10;
// Stuff drawn normally before
// Here I draw one rect in the old way just to show the old way
// and show something on the canvas before:
ctx.beginPath();
ctx.rect(50,50,100,100);
ctx.fill();
ctx.stroke();
// Draw on can2 then draw can2 to can
ctx2.strokeStyle = 'rgba(0,0,0,0.7)';
ctx2.fillStyle = 'rgba(0,0,0,0.7)';
ctx2.lineWidth = 10;
ctx2.beginPath();
ctx2.rect(50,250,100,100);
ctx2.globalCompositeOperation = 'destination-atop';
ctx2.fill();
ctx2.stroke();
ctx.drawImage(can2, 0, 0);
Malheureusement, Jsfiddle me donne un 404 mais j'ai essayé de changer le mode composite et il semble fonctionner. Mais vous avez aussi raison, j'ai besoin de dessiner ma toile "intermédiaire" que j'utilise pour dessiner des formes sur la dernière avec les formes finales. Je vais essayer de trouver comment faire ça tandis que Jsfiddle se remet à nouveau :) Merci encore!
Ah j'ai ajouté tout le code du violon au cas où. Bonne chance avec votre projet!
Je me suis aidé à partir de celui-ci entre-temps: Stackoverflow.com/Questtions/4405336/... . Il serait peut-être bon de mentionner les utilisateurs de JQuery qui pour obtenir le type nécessaire à CAN2 dans votre exemple, vous devez faire $ ("# myCanvas"). Obtenez (0) .getContext ('2d'). Toile. Cela fonctionne comme un charme maintenant. Merci beaucoup une fois de plus!
Cela ne fonctionne plus (déjà ne fonctionnait pas sur Firefox). Je suis actuellement en train de regarder une alternative. Plus d'infos Ici: bugzilla.mozilla.org/show_bug.cgi?id=898375
La réponse de Simon était correcte à l'époque, mais il semble maintenant que Chrome 36 a corrigé un bogue qui affecte sa solution et cela ne fonctionne plus. Il n'a pas déjà fonctionné sur Firefox et il semble être le comportement attendu: https: // bugzilla.mozilla.org/show_bug.cgi?id=898375
Alors, comment allez-vous faire cela?
Vous avez d'abord besoin d'une autre toile.
Dessinez votre forme remplie et caressée sur cette toile sans opacité (pas dans la couleur et pas de globallpha).
Maintenant, dessinez-vous à GlobalLalpha à ce que vous voulez sur votre toile principale.
Dessinez la première toile sur votre principal.
Placez le GlobalLalpha à tout ce que vous avez eu sur votre toile principale.
Fait.
Réponse 2018: Utilisez ex: context.globalalpha
contexte.globalalhama = 0.2;