0

キャンバスにグラデーションが描かれた線がたくさんあります。そのように描いています。jsフィドルリンクもあります。

http://jsfiddle.net/mailrox/XWLgD/2/

var canvas = document.getElementById('c');
var context = canvas.getContext('2d');

context.fillStyle = "rgb(255, 255, 255)";

//draw lines
for (i=1;i<canvas.height;i++){
    if(i%100 == 0){

        //a line
       // linear gradient from start to end of line
       var grad= context.createLinearGradient(50, 50, 150, 150);
       grad.addColorStop(0, "red");
       grad.addColorStop(1, "green");

       context.strokeStyle = grad;
       context.beginPath();
       //line start point
       context.moveTo(0, (i + 20 + 0.5));
       //line end point
       context.lineTo(canvas.width, (i + 20 + 0.5) );

       context.stroke();

       context.closePath();

    }
}

問題は、グラデーションを再起動している各ループですが、グラデーションはすべての行を横切るように見えるだけです。リンクを見れば一目瞭然ですが、説明するのは難しいです。

私がやりたいのは、各行に、すべての行を横切るグラデーションとは対照的に、独自の緑から赤へのグラデーションがあることです。ラインまたはグラデーションを再起動するために欠けている特別なものはありますか?

ありがとう！

4

1 に答える 1

2

グラデーションは45度で下向きになりました。線を引いている、そこに表示されている領域全体をグラデーションが通過することを想像してみてください。

私はあなたのコードをこれから変更しました：

//Create a gradient groing from point (50,50) to (150,150)
var grad= context.createLinearGradient(50, 50, 150, 150);

これに：

//Create a gradient groing from point (50,50) to (150,50)
var grad= context.createLinearGradient(50, 50, 150, 50);

これをチェックしてください：

http://jsfiddle.net/XWLgD/3/

PS：グラデーション効果を強調するためにlineWidthを変更しました：P

グラデーションの作成と描画をループの外側に配置することで、コードを短縮および高速化することもできます。

http://jsfiddle.net/XWLgD/4/

于 2013-01-02T12:34:16.830 に答える