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