html 5キャンバスで塗りつぶし＆ストロークの幅の問題

Question

閉じた形（パスを使用）を描きたい&私のストロークの幅が10です。 今、私はその形を塗りたいと思います。コンテキスト。 しかし、私の形のアルファを変更したいときは、形の境界にある塗りつぶし領域のオーバーラップ&をストロークします。

私はストローク後に黒いままの形状の領域を塗りたいだけです。 私の問題を説明する画像が添付されています。

Click here to show shape with stork & fill bug.

あなたはjsfiddle、 で見ることができるように - 重複領域の色は、複合色です。それは私が望んでいない。 境界線（またはアルファ付きストロークカラー）とまったく同じにします。 - 私は閉じたパスの塗りつぶし領域を指定することができません（contexxのメソッドはありません） - アプリケーションで1つのキャンバスに複数の図形を描画しているため、 "glabalCompositeOperation"を使用できません。

Answer 1

あなたが得ている効果は、どのようにキャンバスが線の形を描くのかという特性のようです。線の厚さの半分が形状の内側に描かれ、半分の厚さは形状の外側に描かれる。 1つの方法は、丸い形と境界を別々のパスとして描画することです。あなたの例でこれを行うための変更を以下に示します。これは不規則な形ではもっと難しくなります。

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