5

私が理解しているように、グラデーションの塗りつぶしは、実際に塗りつぶしている形状に対してではなく、キャンバス要素自体 (つまり 0, 0) に対して指定する必要があります。

質問:この主張は正しいですか? また、それを回避する方法はありますか?

例 (ここでは JSFiddle ):

    ctx.beginPath();
    ctx.rect(40, 50, 100, 70);
    var grd = ctx.createLinearGradient(0, 50, 0, 120);
    grd.addColorStop(0, "red");
    grd.addColorStop(1, "blue");
    ctx.fillStyle = grd;
    ctx.fill();

そこで長方形を作ります。シェイプの左上から始まるグラデーションで塗りつぶすには0, 0、最初の 2 つのパラメーターとして渡すことを期待していました。代わりに、キャンバスに対する長方形の X/Y 座標を渡す必要があるようです。

これは、たとえば、二次曲線で構築された円弧がある場合に問題になります。数学の天才でない限り、曲線の頂点の位置がわからず、制御点しかわからないからです。

4

1 に答える 1

6

描いている図形の境界を知らなければ、苦労することになります。

グラデーションを使用している場合、特にグラデーションを再利用している場合は、常にグラデーションとシェイプを原点から作成し、それらを配置する場所に変換することをお勧めします。

そのようなシステムを設定すると、グラデーションの定義がオブジェクトのサイズに多かれ少なかれ相対的になるようになりますが、境界の計算は自分で行う必要があります。

グラデーションとシェイプを変換して、キャンバスに対して「相対的」にする例を次に示します。

http://jsfiddle.net/simonsarris/RFgcs/

于 2012-08-11T21:09:24.173 に答える