BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

キャンバスを使った線形・放射状グラデーションの使用例

2022-01-31 06:29:40

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：グラデーションラインにaddColorStop(stop,color)と呼ばれるcolorStopを追加します。最初のパラメータは、キーカラーの位置を決定する浮動小数点値です。2番目のパラメータは、キーカラーの色を決定するために使用されます。linearGrad.addColorStop(stop,color);

この 2 つのステップを実行すると、変数 linearGrad は fillStyle としてこのプロパティに渡すことができます。

コードをご覧ください。 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Linear gradients</title>
</head>

<body>
    <canvas id="canvas" style="border: 1px solid #aaa;display:block;margin:0 auto"></canvas>
</body>

</html>
<script>
    window.onload = function () {
        var canvas = document.getElementById("canvas");

        canvas.width = 800;
        canvas.height = 600;

        if (canvas.getContext("2d")) {
            var context = canvas.getContext("2d"); //get contextual drawing environment

            var linearGrad = context.createLinearGradient(0, 0, 800, 600); // the start coordinate of the gradient is (0,0) and the end coordinate is (800,600)

            linearGrad.addColorStop(0.0, '#000'); //The first parameter indicates the position of the key color 0 indicates the start position, 1 indicates the end position, and the second parameter indicates the color of the key color.
            linearGrad.addColorStop(1.0, '#fff');


            context.fillStyle = linearGrad;
            context.fillRect(0, 0, 800, 600);

        } else {
            alert('Your browser does not support canvas, please try another browser~')
        }
    }
</script>

効果

変数linearGradを作成したら、addColorStopを多数追加することができます。

例えば

コード 

var linearGrad = context.createLinearGradient(0, 0, 800, 600); // the start coordinate of the gradient is (0,0) and the end coordinate is (800,600)
 linearGrad.addColorStop(0.0, '#fff');
 linearGrad.addColorStop(0.25, '#FB3');
 linearGrad.addColorStop(0.5, '#690');
 linearGrad.addColorStop(0.75, '#09C');
 linearGrad.addColorStop(1.0, '#000');

効果

また、今回定義したグラデーションラインは傾いていますが、これを水平または垂直に定義することも可能です。グラデーションラインの終了座標を変更すればいいのです。このコードを見ると、グラデーションカラーを水平にすることができます。 

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 radialGrad = context.createRadialGradient(x0,y0,r0,x1,y1,r1);

Step 2 : 線形グラデーションと同じなので、あまり触れません。

リニアグラデーションのコードと非常によく似ています。最初の3つのパラメータは、canvasの中心に半径0の点を定義します。最後の3つのパラメータは、canvasの中心に半径500の大きな円を定義します。これは、ある点から外側に向かって放射状に広がるグラデーションを定義しています。コードを見てみましょう。 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Radial gradient</title>
</head>

<body>
    <canvas id="canvas" style="border: 1px solid #aaa;display:block;margin:0 auto"></canvas>
</body>

</html>
<script>
    window.onload = function () {
        var canvas = document.getElementById("canvas");

        canvas.width = 600;
        canvas.height = 600;

        if (canvas.getContext("2d")) {
            var context = canvas.getContext("2d");

            var radialGrad = context.createRadialGradient(300, 300, 0, 300, 300, 300, 500);

            radialGrad.addColorStop(0.0, '#fff');
            radialGrad.addColorStop(0.25, '#FB3');
            radialGrad.addColorStop(0.5, '#690');
            radialGrad.addColorStop(0.75, '#09C');
            radialGrad.addColorStop(1.0, '#000');

            context.fillStyle = radialGrad;
            context.fillRect(0, 0, 600, 600);

        } else {
            alert('Your browser does not support canvas, please try another browser~')
        }
    }

</script>

効果

パラメータを変えてみて、どのような違いが出るか試してみてください。

今回の記事は以上です。皆さんの勉強のお役に立てれば幸いです。そして、スクリプトハウスを応援していただければ幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します