Fill & Stoke problème de largeur en html 5 toile

Question

Je veux dessiner une forme fermée (Utilisation de chemins) & ma largeur de trait est 10. Maintenant, je veux remplir cette forme, je peux le remplir en utilisant la fonction fill() de le contexte. Mais, quand je veux changer alpha de ma forme, alors & coup de recouvrement de zone de remplissage à la frontière de la forme.

Je veux seulement remplir la zone de forme qui reste noire après mon coup. J'ai joint l'image d'expliquer mon problème.

Click here to show shape with stork & fill bug.

Comme vous pouvez le voir dans jsFiddle, - Couleur de la zone de chevauchement sont de couleur composite. Ce que je ne veux pas. Je veux que ce soit exactement la même chose que dans la bordure (ou couleur de trait avec alpha). - Je ne suis pas autorisé à spécifier la zone de remplissage du chemin fermé. (Il n'y a pas de méthode de contexx.) - Je ne peux pas utiliser "glabalCompositeOperation", car je dessine plus de 1 formes dans 1 toile dans mon application .

Answer 1

L'effet que vous obtenez semble être une propriété de la façon dont la toile dessine des lignes autour d'une forme. La moitié de l'épaisseur de la ligne est dessinée à l'intérieur de la forme et la moitié en dehors de la forme. Un moyen consiste à dessiner la forme remplie et la bordure comme des chemins séparés. Les modifications à effectuer pour votre exemple sont illustrées ci-dessous. Ce sera plus difficile avec des formes irrégulières.

  var canvas = document.getElementById("myCanvas"); 
      var context = canvas.getContext("2d"); 
      var topLeftCornerX = 188; 
      var topLeftCornerY = 50; 
      var width = 200; 
      var height = 100; 
      var linewidth = 10; 

      context.globalAlpha = 0.5; 
      context.beginPath(); 
      context.moveTo(topLeftCornerX, topLeftCornerY); 
      context.lineTo(topLeftCornerX+width,topLeftCornerY); 
      context.lineTo(topLeftCornerX+width,topLeftCornerY+height); 
      context.lineTo(topLeftCornerX,topLeftCornerY+height); 
      context.closePath(); 
      context.fillStyle = "#FF0000"; 
      context.fill(); 
      context.beginPath(); 
      context.moveTo(topLeftCornerX-linewidth/2, topLeftCornerY-linewidth/2); 
      context.lineTo(topLeftCornerX+width+linewidth/2,topLeftCornerY-linewidth/2); 
      context.lineTo(topLeftCornerX+width+linewidth/2,topLeftCornerY+height+linewidth/2); 
      context.lineTo(topLeftCornerX-linewidth/2,topLeftCornerY+height+linewidth/2); 
      context.closePath(); 
      context.lineWidth = linewidth; 
      context.strokeStyle = "#00FF00"; 
      context.stroke();