3

JavaScriptキャンバスのストロークスタイル/線画についての私の理解は標準に達していないようです。少し透明度のある線を描きたいのですが、すべての線（セグメント）に透明度を適用できず、代わりに、描画したすべての線にグラデーションとして適用されます...

コード例:

var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');

WIDTH = 400;
HEIGHT = 400;
c.width = WIDTH;
c.height = HEIGHT;;

function applyGrid()
{
    a.fillStyle = "000000";
    a.lineWidth = 2;
    a.fillRect(0, 0, WIDTH, HEIGHT);

    a.strokeStyle = "rgba(0,200,200,0.1)";
   for (var x = 0; x <= WIDTH; x += 50)
   {
      a.moveTo(x, 0);
      a.lineTo(x, HEIGHT);
      a.stroke();
    }

}
applyGrid();​

サンプル コードと (間違った) 結果をここで参照してください: http://jsfiddle.net/zKWaT/3/すべての垂直線に右端の線の透明度を持たせたいのですが、代わりに徐々にフェードします。

lineTo と stroke がどのように機能するかについて基本的なことを見逃していると思いますが、あちこちの例を見ても、明らかになるものは見つかりませんでした... tt.

ご意見ありがとうございます。

4

1 に答える 1

1

for ループ内に追加a.beginPath()して、各ループで新しい行を開始します。そうしないと、同じ行を何度も延長してストロークするだけです。

var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');

WIDTH = 400;
HEIGHT = 400;
c.width = WIDTH;
c.height = HEIGHT;;

function applyGrid()
{
    a.fillStyle = "000000";
    a.lineWidth = 2;
    a.fillRect(0, 0, WIDTH, HEIGHT);

    a.strokeStyle = "rgba(0,200,200,0.1)";
   for (var x = 0; x <= WIDTH; x += 50)
   {
      a.beginPath(); //ADD THIS
      a.moveTo(x, 0);
      a.lineTo(x, HEIGHT);
      a.stroke();
    }

}
applyGrid();​
于 2012-12-17T22:15:14.463 に答える