13->14 JavaScript 変更

methodオブジェクトの作成
・ファンクションをグルーピング

1.1 // ファンクションをグルーピング
brfore:

    // 色の変更
        function _data_color() {
                let cnvColor = this.getAttribute( "data-color" ) ;
                console.log("cnvColor ="+cnvColor );

                root.setCnvColor(cnvColor);
        }

    // 線の太さ変更
        function _data_bold() {
                let cnvBold = this.getAttribute( "data-bold" ) ;
                console.log("cnvBold ="+cnvBold );

                root.setCnvBold(cnvBold);
        }


    // 描画クリア
        function _clear(){
                root.ctx.clearRect(0, 0, root.cnvWidth, root.cnvHeight);
                root.setBgColor(root.bgColor);
        }

    // canvasを画像で保存
        function _download(){
                var base64 = root.canvas.toDataURL("image/jpeg");
                document.getElementById("download").href = base64;
        }

after:

        var method = {
                data_color : function () {
                        let cnvColor = this.getAttribute( "data-color" ) ;
                        console.log("cnvColor ="+cnvColor );

                        root.setCnvColor(cnvColor);
                },

                data_bold : function () {
                        let cnvBold = this.getAttribute( "data-bold" ) ;
                        console.log("cnvBold ="+cnvBold );

                        root.setCnvBold(cnvBold);
                },

                clear : function (){
                        root.ctx.clearRect(0, 0, root.cnvWidth, root.cnvHeight);
                        root.setBgColor(root.bgColor);
                },

                download : function (){
                        var base64 = root.canvas.toDataURL("image/jpeg");
                        document.getElementById("download").href = base64;
                }
        }

1.2 色の変更
呼び出しの変更
brfore:

                        c_elms[j].addEventListener("click" , _data_color, false);

after:

                        c_elms[j].addEventListener("click" , method.data_color, false);

1.3 線の太さ変更
呼び出しの変更
brfore:

                        b_elms[j].addEventListener("click" , _data_bold, false);

after:

                        b_elms[j].addEventListener("click" , method.data_bold, false);

1.3 描画クリア
呼び出しの変更
brfore:

        clear.addEventListener("click" , _clear, false);

after:

        clear.addEventListener("click" , method.clear, false);

1.4 canvasを画像で保存
呼び出しの変更
brfore:

        download.addEventListener("click" , _download, false);

after:

        download.addEventListener("click" , method.download, false);