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);