• /
    • /
    • /
  • 【HTML5を知ろう】 Canvasで色(グラデーション)を付ける！
  • WEB

【HTML5を知ろう】 Canvasで色(グラデーション)を付ける！

HTML5_blog4回目

おはようこんにちはこんばんは。

据え置き新ハードはとりあえず購入したい。
“みたらし”でございます(｀・Д・)

第4回目はCanvasで図形に色を付けるやり方を見てみたいと思います
(｀・ω・´)

前回作成した物を調節

今回も前回作成した物を元に進めていこうと思うのですが、
ちょっとCanvasの領域が狭かったりするので調節します。

・Canvasの領域を拡張
・長くなってきたのでコメントの追加
・背景がチカチカするので見やすい色に変更
・長方形の変数名を変更

上記点踏まえて改良。
前回まで長方形をsquareにしてましたが長方形はrectangleでした
(´・ω:;.:…
下記みたいな感じに変更します！


    <!DOCTYPE html>
    <html>
    <head>

    <script>
        function test() {
            var canvas = document.getElementById('sumple');
            
            //2Dコンテキストを定義
            var rectangle = canvas.getContext('2d');
            var circle = canvas.getContext('2d');
            var point = canvas.getContext('2d');
            var path = canvas.getContext('2d');
            
            //長方形の描画設定
            rectangle.beginPath();
            rectangle.strokeRect(100, 100, 300, 200);
            
            //円の描画処理(長方形の上)
            circle.beginPath();
            circle.arc(150, 60, 40, 0, Math.PI*2, true);
            circle.stroke();
            
            //円の中心点の描画処理(長方形の上の円の中)
            point.beginPath();
            point.arc(150,60,2,0,Math.PI*2,true);
            point.fill();
            
            //曲線の描画処理(長方形の周囲)
            path.beginPath();
            path.moveTo(150,60);
            path.lineTo(400,60);
            path.quadraticCurveTo(440, 60, 440, 100);
            path.lineTo(440,300);
            path.quadraticCurveTo(440,340,400,340);
            path.lineTo(100,340);
            path.quadraticCurveTo(60,340,60,300);
            path.lineTo(60,100);
            path.quadraticCurveTo(60,60,100,60);
            //path.lineTo(150,60);
            path.stroke();
        }

        onload = function() {
            test();
        };
    </script>

    </head>
    <body>

    [HTML5を知ろう] Canvasで色をつける！

    <div>
        <canvas width="800" height="800" id="sumple" style="background-color:rgba(204,255,255,1);"></canvas>
    </div>

    </body>
    </html>

表示するとこんな感じ

Canvas図形4-01

これで今回は進めていきましょう(｀・ω・)

とりあえず色を付けてみる

まずは簡単に色を付けてみます。

rectangle.beginPath();
の下に
rectangle.strokeStyle = ‘red’;
を追加

circle.beginPath();
の下に
circle.fillStyle = ‘blue’;
を追加し、
circle.stroke();
を
circle.fill();
に変更してみて下さい。

これで表示すると…

Canvas図形4-02

色が付きました。
超簡単！(｀・Д・´)

円は線との違いを見たかったので塗りつぶしに変更しました。
また、redとかblueとか書いてある部分をgreenとかにすると色を変更できます。

ただ何故か色の設定をしていない部分も影響を受けてしまっているので、
それぞれ個別に色を設定します。

function の中身を下記のように書き換えてみて下さい。


    function test() {
        var canvas = document.getElementById('sumple');
        
        //2Dコンテキストを定義
        var rectangle = canvas.getContext('2d');
        var circle = canvas.getContext('2d');
        var point = canvas.getContext('2d');
        var path = canvas.getContext('2d');
        
        //長方形の描画設定
        rectangle.beginPath();
        rectangle.fillStyle = 'green';
        rectangle.fillRect(100, 100, 300, 200);
        
        //円の描画処理(長方形の上)
        circle.beginPath();
        circle.fillStyle = 'rgb(210,210,255)';
        circle.arc(150, 60, 40, 0, Math.PI*2, true);
        circle.fill();
        
        //円の中心点の描画処理(長方形の上の円の中)
        point.beginPath();
        point.fillStyle = 'white';
        point.arc(150,60,2,0,Math.PI*2,true);
        point.fill();
        
        //曲線の描画処理(長方形の周囲)
        path.beginPath();
        path.strokeStyle = 'blue';
        path.moveTo(150,60);
        path.lineTo(400,60);
        path.quadraticCurveTo(440, 60, 440, 100);
        path.lineTo(440,300);
        path.quadraticCurveTo(440,340,400,340);
        path.lineTo(100,340);
        path.quadraticCurveTo(60,340,60,300);
        path.lineTo(60,100);
        path.quadraticCurveTo(60,60,100,60);
        //path.lineTo(150,60);
        path.stroke();
    }

これを表示するとこんな感じ。

Canvas図形4-03

四角、円、点、曲線全部に色が付きました！
円だけRGBで色を設定しています。
RGBなら細かく色を設定できるぞ(｀・ω・´)

グラデってみる

次はグラデーションを設定してみます。

rectangle.beginPath();
の下に下記を追加してみて下さい。


        var rectangle_color = canvas.getContext('2d');
        var rectangle_color = rectangle.createLinearGradient(100, 100, 100, 300);
        rectangle_color.addColorStop(0.0, 'rgb(0, 255, 255)');
        rectangle_color.addColorStop(1.0, 'rgb(253, 182, 7)');
        rectangle.fillStyle = rectangle_color;

rectangle.fillStyle = ‘green’;
は消しちゃって！

表示するとこんな感じになります。

Canvas図形4-04

うほっ
なかなかいいグラデーションしてるじゃない(´・ω・)

・var rectangle_color = canvas.getContext(‘2d’);
グラデーション設定用のコンテキストを定義して

・var rectangle_color = rectangle.createLinearGradient(100, 100, 100, 300);
グラデーションをかける領域を設定して

・rectangle_color.addColorStop(0.0, ‘rgb(0, 255, 255)’);
・rectangle_color.addColorStop(1.0, ‘rgb(253, 182, 7)’);
どの色からどの色に変化させるかを設定しています。

グラデーション領域を設定しているcreateLinearGradientは
(開始地点座標,　終了地点座標)を設定している感じで、
開始地点から終了地点に向かって『平行』にグラデーションがかかります。
開始、終了地点を結んだ線が斜めになるようにすると色の変化も斜めになるので、
いろいろ試してみるとわかりやすいと思います。(´ω｀)

円もグラデる

円もグラデっちゃいます。
長方形の上にある円はちょっと小さいので、
別に用意してそれをグラデります。
(｀・Д・)グラデるってなんか発音楽しくない？

function test 関数の一番下に下記を追加して下さい。


        var circle2 = canvas.getContext('2d');
        circle2.beginPath();
        circle2.arc(600, 130, 100, 0, Math.PI*2, true);
        circle2.fill();

表示するとこんな感じ。

Canvas図形4-05

白いお饅頭みたいのができました。饅頭こわい

次にさっき追加した物を下記のような感じで書き換えます


        var circle2 = canvas.getContext('2d');
        var circle2_color = circle2.createRadialGradient(600, 130, 20, 600, 130, 100);
        circle2.beginPath();
        circle2.arc(600, 130, 100, 0, Math.PI*2, true);
        circle2_color.addColorStop(0.0 , 'rgb(250, 100, 100)');
        circle2_color.addColorStop(0.5 , 'rgb(100, 250, 100)');
        circle2_color.addColorStop(1.0 , 'rgb(100, 100, 250)');
        circle2.fillStyle = circle2_color;
        circle2.fill();

表示するとこんな感じ。

Canvas図形4-06

どぎついお饅頭になりました。
これはとても食べられない(´・ω・｀)

円でグラデーションをかける際は、
・circle2.createRadialGradient(600, 130, 20, 600, 130, 100);
のように設定しており、
(開始円の中心座標, 開始円の半径, 終了円の中心座標, 終了円の反映)
という形で設定できます。

大きさの円を2つ重ねると弧と弧の間がグラデーションになる。
そんな感じです(・д・)

円に長方形の時のような普通のグラデーションを付けることもちゃんとできます。

function test 関数の一番下に下記を追加して下さい。


        var circle3 = canvas.getContext('2d');
        var circle3_color = circle3.createLinearGradient(500, 270, 700, 470);
        circle3.beginPath();
        circle3.arc(600, 370, 100, 0, Math.PI*2, true);
        circle3_color.addColorStop(0.0 , 'rgb(0, 0, 0)');
        circle3_color.addColorStop(1.0 , 'rgb(255, 255, 255)');
        circle3.fillStyle = circle3_color;
        circle3.fill();

表示するとこんな感じ。

Canvas図形4-07

グラデーション領域は四角形で定義して、その中に円を配置しています。
逆に四角形の中に円形のグラデーションを設定することも可能です(｀・Д・´)

いろんな色でグラデる

これまでは少ない色数でのグラデーションでしたが、
もっと多くの色を設定することも可能です。

ちょっと長いですが function test 関数の一番下に下記を追加して下さい。


        var square = canvas.getContext('2d');
        var square_color = canvas.getContext('2d');
        var square_color = square.createLinearGradient(100, 400, 400, 700);
        square.beginPath();
        square_color.addColorStop(0.0 , 'rgb(255,253,230)');
        square_color.addColorStop(0.1 , 'rgb(0,163,219)');
        square_color.addColorStop(0.2 , 'rgb(185,116,164)');
        square_color.addColorStop(0.3 , 'rgb(237,160,152)');
        square_color.addColorStop(0.4 , 'rgb(227,190,136)');
        square_color.addColorStop(0.5 , 'rgb(54,176,131)');
        square_color.addColorStop(0.6 , 'rgb(100,61,97)');
        square_color.addColorStop(0.7 , 'rgb(255,235,88)');
        square_color.addColorStop(0.8 , 'rgb(0,12,43)');
        square_color.addColorStop(0.9 , 'rgb(160,202,90)');
        square_color.addColorStop(1.0 , 'rgb(217,93,151)');
        square.fillStyle = square_color;
        square.fillRect(100, 400, 300, 300);

表示するとこうなります。

Canvas図形4-08

なんかすごい色になりました(；・д・)

こんな感じで結構簡単に色を付けたり、
グラデったりできるので試してみて下さい！

今回のソースを整えるとこんな感じです。


<!DOCTYPE html>
<html>
<head>

<script>
    function test() {
        var canvas = document.getElementById('sumple');
        
        //2Dコンテキストを定義
        var rectangle = canvas.getContext('2d');
        var rectangle_color = canvas.getContext('2d');
        var square = canvas.getContext('2d');
        var square_color = canvas.getContext('2d');
        var circle = canvas.getContext('2d');
        var circle2 = canvas.getContext('2d');
        var circle3 = canvas.getContext('2d');
        var point = canvas.getContext('2d');
        var path = canvas.getContext('2d');
        
        //グラデーション領域を定義
        //Linearは一方方向、Radialは円形
        var rectangle_color = rectangle.createLinearGradient(100, 100, 100, 300);
        var square_color = square.createLinearGradient(100, 400, 400, 700);
        var circle2_color = circle2.createRadialGradient(600, 130, 20, 600, 130, 100);
        var circle3_color = circle3.createLinearGradient(500, 270, 700, 470);
        
        //長方形の描画設定開始
        rectangle.beginPath();
        //長方形のグラデーション設定
        rectangle_color.addColorStop(0.0 , 'rgb(0, 255, 255)');
        rectangle_color.addColorStop(1.0 , 'rgb(253, 182, 7)');
        rectangle.fillStyle = rectangle_color;
        //長方形の描画
        rectangle.fillRect(100, 100, 300, 200);
        
        //円の描画処理(長方形の上)
        circle.beginPath();
        circle.fillStyle = 'rgb(210,210,255)';
        circle.arc(150, 60, 40, 0, Math.PI*2, true);
        circle.fill();
        
        //円の中心点の描画処理(長方形の上の円の中)
        point.beginPath();
        point.fillStyle = 'white';
        point.arc(150, 60, 3, 0, Math.PI*2, true);
        point.fill();
        
        //曲線の描画処理(長方形の周囲)
        path.beginPath();
        path.strokeStyle = 'blue';
        path.moveTo(150,60);
        path.lineTo(400,60);
        path.quadraticCurveTo(440, 60, 440, 100);
        path.lineTo(440,300);
        path.quadraticCurveTo(440,340,400,340);
        path.lineTo(100,340);
        path.quadraticCurveTo(60,340,60,300);
        path.lineTo(60,100);
        path.quadraticCurveTo(60,60,100,60);
        //path.lineTo(150,60);
        path.stroke();
        
        //右上部の円の描画処理
        circle2.beginPath();
        circle2.arc(600, 130, 100, 0, Math.PI*2, true);
        circle2_color.addColorStop(0.0 , 'rgb(250, 100, 100)');
        circle2_color.addColorStop(0.5 , 'rgb(100, 250, 100)');
        circle2_color.addColorStop(1.0 , 'rgb(100, 100, 250)');
        circle2.fillStyle = circle2_color;
        circle2.fill();
        
        //右下部の円の描画処理
        circle3.beginPath();
        circle3.arc(600, 370, 100, 0, Math.PI*2, true);
        circle3_color.addColorStop(0.0 , 'rgb(0, 0, 0)');
        circle3_color.addColorStop(1.0 , 'rgb(255, 255, 255)');
        circle3.fillStyle = circle3_color;
        circle3.fill();
        
        //正方形の描画処理
        square.beginPath();
        square_color.addColorStop(0.0 , 'rgb(255,253,230)');//卯花色
        square_color.addColorStop(0.1 , 'rgb(0,163,219)');  //シアン
        square_color.addColorStop(0.2 , 'rgb(185,116,164)');//菖蒲色
        square_color.addColorStop(0.3 , 'rgb(237,160,152)');//珊瑚色
        square_color.addColorStop(0.4 , 'rgb(227,190,136)');//枯草色
        square_color.addColorStop(0.5 , 'rgb(54,176,131)'); //コバルトグリーン
        square_color.addColorStop(0.6 , 'rgb(100,61,97)');  //京紫
        square_color.addColorStop(0.7 , 'rgb(255,235,88)'); //菜の花色
        square_color.addColorStop(0.8 , 'rgb(0,12,43)');    //インディゴ
        square_color.addColorStop(0.9 , 'rgb(160,202,90)'); //萌黄
        square_color.addColorStop(1.0 , 'rgb(217,93,151)'); //牡丹色
        square.fillStyle = square_color;
        square.fillRect(100, 400, 300, 300);
    }

    //図の描画設定を呼び出し
    onload = function() {
        test();
    };
</script>

</head>
<body>

[HTML5を知ろう] Canvasで図形を描く！

<div>
    <canvas width="800" height="800" id="sumple" style="background-color:rgba(204,255,255,1);"></canvas>
</div>

</body>
</html>

だいぶ長くなってきました…
次回はアニメーションに関して弄ってみたいと思います(｀・Д・´)

参考文献

本記事は下記サイトを参考にさせて頂きました。

・線形グラデーションを指定する

・canvas : 描画スタイルの指定（グラデーション編）

・色の名前とカラーコード、ＲＧＢ、ＣＭＹＫの一覧表

※2016年7月30日現在

このエントリーをはてなブックマークに追加

みたらしが最近書いた記事

WRITERS POSTS もっと見る

すべてのカテゴリー

シリーズ

ちーむ別の記事をみる

Go-Next人気の記事

RANKING

他にもこんな記事が読まれています！

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ