背景

お絵描きできるアプリを自分で作りたい
実際に作ってみると、カラーパレットでのペンの色の選択に迷う...
カラーパレットを利用した色の変更以外に、他の方法で色の切り替えができないかなと思いました

今回はこれつくります

今回はボタンを使って
赤いボタンを押すと赤色のペンになる、青いボタンを押すと青色のペンになる
という色の選択ができるようなものを作っていきます

<追記>
完成イメージは、PCのみ操作可能となります
完成イメージはここから

描画のスタイルは
マウスでクリックしていている間は、描くことができて、クリックボタンを離すと描画終了というようになっています

制作の流れ

試し書きできるようにcanvasタグを準備
ボタンを作る
ボタンを押したときに単一色が選択される処理を記述

実行環境

HTML
CSS
CreateJS

今回はCreateJSをHTMLファイルにそのまま記述していきます

では作ってきましょう～

1. 試し書きできるようにcanvasタグを準備

以下HTMLファイルです

oekaki.html

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="layout.css">
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>

    <body>
        <!--横500px,縦500pxのキャンバス--> 
        <canvas id="myCanvas" width="500" height="500"></canvas>  
        <br>   
    </body>

    <script>

    </script>
</html>

これで流れ1は終了です
次はボタンを作っていきましょう

2. ボタンを作る

ボタンはinputタグで記述し、形やボタンの色などはcssファイルで記述していきます

oekaki.html

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="layout.css">
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>

    <body>
        <canvas width="500" height="500"></canvas>
        <br>
        <!--以下の2行を追加-->
        <input id="redpen" class="pb" type="button" value="赤色">
        <input id="bluepen" class="pb" type="button" value="青色">     
    </body>

    <script>

    </script>
</html>

10行目と11行目にinputタグを使ってボタンを作りました
10行目は赤色のボタンとし、idを"redpen"とします
11行目は青色のボタンとし、idを"bluepen"とします
両方ともclassを"pb"としてボタンの装飾(サイズ,見た目など)をするために使います

これでボタンの記述が終わったので、いよいよ単一色で選択できるように処理を記述していきます

3. 単一色が選択される処理を記述

ここでやっとCreateJSが登場します
ボタンが押されたときに、ボタンの色と同じペンの色にしたいので

赤いボタンが押された
赤色を出すことをペンに教えてあげる

この順番で書いていきます
赤いボタンが押されたときのコードを記述

oekaki.html

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="layout.css">
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>

    <body>
        <canvas width="500" height="500"></canvas>
        <br>
        <input id="redpen" class="pb" type="button" value="赤色">
        <input id="bluepen" class="pb" type="button" value="青色">     
    </body>

    <!--以下にCreateJSで記述していく-->
    <script>
        // 赤色のボタンが押されたとき
        document.querySelector("#redpen").addEventListener("click",function(){
         // ここにペンの色を変える処理を書く
        });

    </script>
</html>

次に赤色を出すことをペンに教えてあげる
→ボタンを押した後の処理を記述

oekaki.html

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="layout.css">
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>

    <body>
        <canvas width="500" height="500"></canvas>
        <br>
        <input id="redpen" class="pb" type="button" value="赤色">
        <input id="bluepen" class="pb" type="button" value="青色">
        
    </body>

    <script>
        document.querySelector("#redpen").addEventListener("click",function(){

            //Stageオブジェクトを作成、myCanvasはcanvasタグに付けたid
            var stage = new createjs.Stage("myCanvas");

            //描画をするためのシェイプを作成
            var shape = new createjs.Shape();
            //シェイプをステージに配置
            var art = stage.addChild(shape);

            //ステージ上でマウスボタンを押したときのイベント設定
            stage.addEventListener("stagemousedown",handleDown);

            //マウスを押した時に実行される
            function handleDown(event){

                //線の描画開始
                shape.graphics.beginStroke("red"); //値の色で描画

                //ペンの太さ
                shape.graphics.setStrokeStyle(5);

                //描画開始位置を指定
                shape.graphics.moveTo(event.stageX,event.stageY);

                //ステージ上でマウスを動かしたときと離したときのイベント設定
                stage.addEventListener("stagemousemove", handleMove);
                stage.addEventListener("stagemouseup", handleUp);

            }

            //マウスが動いたときに実行する
            function handleMove(event){

                //マウス座標への線を引く
                shape.graphics.lineTo(event.stageX, event.stageY);
            
            }

            //マウスボタンが離れたときに実行される
            function handleUp(event){

                //マウス座標への線を引く
                shape.graphics.lineTo(event.stageX, event.stageY);

                //線の描画を終了する
                shape.graphics.endStroke();

                //イベント解除
                stage.removeEventListener("stagemousemove", handleMove);
                stage.removeEventListener("stagemouseup", handleUp);

            }

            createjs.Ticker.timingMode = createjs.Ticker.RAF;
                createjs.Ticker.addEventListener("tick", onTick);
                function onTick(){
                stage.update();
                }                 

        });

    </script>
</html>

長々としたコードになってしまいましたが
マウスでクリックすると描くことができるようにするためのコードを記述しました
その中のコードにペンは赤色にしてねという指示をしました
そのコードは大きく分けて3つあります

マウスを押したしたときに実行する処理→ここで赤色にしてねという指示を出す

create.js

            //マウスを押した時に実行される
            function handleDown(event){

                //ここで値をredにしてペンの色を赤色にします
                shape.graphics.beginStroke("red"); 

                shape.graphics.setStrokeStyle(5);

                shape.graphics.moveTo(event.stageX,event.stageY);

                stage.addEventListener("stagemousemove", handleMove);
                stage.addEventListener("stagemouseup", handleUp);

            }

マウスが動いたときに実行する処理
マウスボタンが離れたときに実行されるコード

これで赤いボタンを押したときにペンの色が赤にできるようになりました
青色も同じように記述していきます...と言いたいところなのですが
コード量が多くなり見にくくなってしまうので、描画部分を関数にしたいと思います

oekaki.html

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="layout.css">
        <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    </head>

    <body>
        <canvas id="myCanvas" width="500" height="500"></canvas>
        <br>
        <input id="redpen" class="pb" type="button" value="赤色">
        <input id="bluepen" class="pb" type="button" value="青色">
        
    </body>

    <script>

        //Stageオブジェクトを作成。表示リストのルートになる
        var stage = new createjs.Stage("myCanvas");

        //描画をするためのシェイプを作成
        var shape = new createjs.Shape();

        function paint(color){

            //シェイプをステージに配置
            var art = stage.addChild(shape);

            //ステージ上でマウスボタンを押したときのイベント設定
            stage.addEventListener("stagemousedown",handleDown);

            //マウスを押した時に実行される
            function handleDown(event){

                //線の描画開始
                shape.graphics.beginStroke(color); //値の色で描画

                //ペンの太さ
                shape.graphics.setStrokeStyle(5);

                //描画開始位置を指定
                shape.graphics.moveTo(event.stageX,event.stageY);

                //ステージ上でマウスを動かしたときと離したときのイベント設定
                stage.addEventListener("stagemousemove", handleMove);
                stage.addEventListener("stagemouseup", handleUp);

            }

            //マウスが動いたときに実行する
            function handleMove(event){

                //マウス座標への線を引く
                shape.graphics.lineTo(event.stageX, event.stageY);

            }

            //マウスボタンが離れたときに実行される
            function handleUp(event){

                //マウス座標への線を引く
                shape.graphics.lineTo(event.stageX, event.stageY);

                //線の描画を終了する
                shape.graphics.endStroke();

                //イベント解除
                stage.removeEventListener("stagemousemove", handleMove);
                stage.removeEventListener("stagemouseup", handleUp);

            }

            createjs.Ticker.timingMode = createjs.Ticker.RAF;
                createjs.Ticker.addEventListener("tick", onTick);
                function onTick(){
                stage.update();
                }       
        }

        //赤のボタンが押された時
        document.querySelector("#redpen").addEventListener("click",function(){

            var red_pen = "red";
            
            paint(red_pen)

        });

        //青のボタンが押された時
        document.querySelector("#bluepen").addEventListener("click",function(){

            var blue_pen = "blue";
            
            paint(blue_pen)

        });

    </script>
</html>

描画部分はpaint関数としました
そして、ボタンが押されたときに関数を呼び出しました

creatjs.js


        //赤のボタンが押された時
        document.querySelector("#redpen").addEventListener("click",function(){

            var red_pen = "red";

            paint(red_pen)

        });

```

red_penという変数に"red"を入れて関数に渡してあげます
青いボタンが押されたときも同様に記述します

```create.js
        //青のボタンが押された時
        document.querySelector("#bluepen").addEventListener("click",function(){

            var blue_pen = "blue";

            paint(blue_pen)

        });

```

これでボタンを押して色の切り替えができるようになりました


ボタンの装飾もしておきましょう

```layout.css
#myCanvas{
    border:solid 5px black;
}

.pb{
    width:70px;
    height:70px;
    border-radius:5px;
    outline:lightyellow;
}

#redpen{
    background-color:red;
    color:white;     
}

#bluepen{
    background-color:blue;
    color:white;
}

```

これで全て完成しました
<追記>
完成イメージは、PCのみ操作可能となります
<a href="https://tsr-rina.github.io/oekaki.html" target="_blank">デモはここから見ることができます</a>

## 終わり
今回はカラーパレットで色の選択をして描画するのではなく、ボタンを押して色の切り替えができるようにしました

ありがとうございました

間違っている部分やこうした方が良いなどなどありましたら指摘お願いいたします

## 参考文献
* <a href="https://ics.media/tutorial-createjs/paint/">CreateJS でお絵描きツールを作ろう</a>