fillStyle の 2 番目の使用例は、グラデーション塗りつぶしです。グラデーションカラーは、線形グラデーションカラーと放射状グラデーションカラーに分けられます。
線形グラデーション: 大きく 2 つのステップに分かれます。ここでは Canvas の 2 つの新しい機能を使用します。
ステップ 1: 新しい関数 createLinearGradient(xstart,ystart,xend,yend);var linearGrad = context.createLinearGradient(xstart,ystart,xend,yend); を使用します。
4 つのパラメータがあります。それぞれ xstart、ystart、xend、yend で 2 つの座標を形成し、これら 2 つの座標は線分を形成します。この線分は実際にはグラデーション線です。グラデーション ラインは、グラデーションの方向とスケールを定義するために使用されます。
2 番目のステップ: このグラデーション ラインに基づいて colorStop を追加します。このメソッドは addColorStop(stop, color) と呼ばれます。これには、stop と color の 2 つのパラメータがあります。最初のパラメータは、キー カラーの位置を決定するために使用される浮動小数点値です。 2 番目のパラメーターは、キーカラーの色を決定するために使用されます。 LinearGrad.addColorStop(stop,color);
これら 2 つの手順を完了すると、linearGrad 変数を fillStyle としてこの属性に渡すことができます。
コードを見てください:
<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width、initial-scale=1.0> <meta http-equiv=X-UA -互換性のあるコンテンツ=ie=edge> <title>線形グラデーション</title></head><body> <canvas id=canvas style=border: 1px ソリッド#aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var Canvas = document.getElementById(canvas); ; Canvas.height = 600; if (canvas.getContext(2d)) { var context = Canvas.getContext(2d); // コンテキスト描画環境を取得します。 context.createLinearGradient(0, 0, 800, 600); // グラデーション ラインの開始座標は (0,0) で、終了座標は (800,600) です。 linearGrad.addColorStop(0.0, '#000'); 1 番目のパラメータはキー カラーの位置を表します。0 は開始位置を表し、1 は終了位置を表します。2 番目のパラメータはキー カラーの色を表します。 LinearGrad.addColorStop(1.0, '#fff'); context.fillStyle = LinearGrad; context.fillRect(0, 0, 800, 600) } else {alert('お使いのブラウザはキャンバスをサポートしていません。ブラウザを変更してみてください ~ ') } }</script>レンダリング：
LinearGrad 変数を作成した後、ColorStop などを追加できます。
例えば：
コード：
var linearGrad = context.createLinearGradient(0, 0, 800, 600); // グラデーション ラインの開始座標は (0,0) で、終了座標は (800,600) です。 linearGrad.addColorStop(0.0, '#fff') ; LinearGrad.addColorStop(0.25, '#FB3'); '#690'); linearGrad.addColorStop(0.75, '#09C');
レンダリング：
また、定義したグラデーション線は斜めになっていますが、水平または垂直として定義することもできます。変更する必要があるのは、グラデーション ラインの終了座標だけです。水平方向のグラデーションを作成するコードを見てください。
var linearGrad = context.createLinearGradient(0, 0, 800, 0);
レンダリング：
縦方向のグラデーションカラー:
var linearGrad = context.createLinearGradient(0, 0, 800, 0);
レンダリング：
水平方向または垂直方向に傾いているかどうかに関係なく、私たちが行うことはキャンバス全体に反映されます。では、グラデーション ラインがキャンバスの一部にのみ割り当てられている場合、どのような効果があるでしょうか。改造しましょう
var linearGrad = context.createLinearGradient(0, 0, 400, 300);
レンダリング：
同様に、作成するグラデーション線も、このキャンバスの最大幅と最大高さを超える可能性があります。改造しましょう
var linearGrad = context.createLinearGradient(-200, -100, 1000, 800);
レンダリング：
また、描画する塗りつぶされた形状が必ずしもキャンバス全体を占めるとは限りません。定義した形状は任意に調整できます。この塗りつぶされた形状は、定義したグラデーション ライン上で適切な塗りつぶし色を見つけて塗りつぶします。例えば：
var linearGrad = context.createLinearGradient(-200, -100, 1000, 800);
レンダリング：
放射状グラデーション: 線形グラデーションとの違いは、放射状グラデーションが放射状グラデーションを定義することです。この放射状の勾配は、2 つの同心円に基づいて定義されます。 2 点間で定義される線形グラデーションとは異なります。
放射状グラデーションも完了するには 2 つの手順が必要です。
ステップ 1: 新しい関数 createRadialGradient(x0,y0,r0,x1,y1,r1) を使用します。これには 6 つのパラメーターがあります。最初の 3 つのパラメータは最初のリングの座標と半径を定義し、最後の 3 つのパラメータは 2 番目のリングの座標と半径を定義します。放射状の勾配全体がこれら 2 つの円の間に発生します。 var radioGrad = context.createRadialGradient(x0,y0,r0,x1,y1,r1);
ステップ 2: 線形グラデーションと同じなので、詳しくは紹介しません。 radioGrad.addColorStop(stop,color);
このコードは、線形グラデーションのコードと非常によく似ています。ここでは createRadialGradient が使用されているだけです。最初の 3 つのパラメーターは、キャンバスの中心にある半径 0 の点を定義します。最後の 3 つのパラメーターは、キャンバスの中心に半径 500 の大きな円を定義します。これは、点から外側に放射状に広がる放射状のグラデーションを定義します。コードを見てみましょう
<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width、initial-scale=1.0> <meta http-equiv=X-UA -互換性のあるコンテンツ=ie=edge> <title>放射状グラデーション</title></head><body> <canvas id=canvas style=border: 1px ソリッド#aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var Canvas = document.getElementById(canvas); ; Canvas.height = 600; if (canvas.getContext(2d)) { var context = Canvas.getContext(2d); context.createRadialGradient(300, 300, 0, 300, 300, 500);radialGrad.addColorStop(0.25, '#FB3'); '); RadialGrad.addColorStop(0.75, '#09C'); radioGrad.addColorStop(1.0, '#000'); context.fillStyle = radius(0, 0, 600, 600);お使いのブラウザはキャンバスをサポートしていません。ブラウザを変更してみてください~') } }</script>レンダリング：
パラメーターを変更して、どのような効果が得られるかを確認してください。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。