1. canvas.js
1.1 globalThis.clickFlgの除去
mousedown とmouseupのイベントをgrabしたことで、globalThis.clickFlg の必要性を無くす
before:
if(!globalThis.clickFlg) {
console.log("mousemove");
return false;
}
after:
無し
1.2
before:
canvas.onmousedown = function(){
globalThis.clickFlg = 1; // マウス押下開始
canvas.addEventListener("mousemove" , _mouseMove, false);
}
after:
canvas.onmousedown = function(e){
globalThis.clickFlg = 1; // マウス押下開始
root.drawStart(e.offsetX, e.offsetY, cnvBold, cnvColor);
canvas.addEventListener("mousemove" , _mouseMove, false);
}
1.3 drawファンクションをdrawStartとdrawに分離
before:
// 描画処理
"draw":function (x, y, cnvBold, cnvColor ) {
this.ctx.lineWidth = cnvBold;
this.ctx.strokeStyle = 'rgba('+cnvColor+')';
// 初回処理の判定
if (globalThis.clickFlg == "1") {
globalThis.clickFlg = "2";
this.ctx.beginPath();
this.ctx.lineCap = "round"; // 線を角丸にする
this.ctx.moveTo(x, y);
} else {
this.ctx.lineTo(x, y);
}
this.ctx.stroke();
},
after:
"drawStart":function (x, y, cnvBold, cnvColor ) {
this.ctx.lineWidth = cnvBold;
this.ctx.strokeStyle = 'rgba('+cnvColor+')';
// 初回処理の判定
if (globalThis.clickFlg == "1") {
globalThis.clickFlg = "2";
this.ctx.beginPath();
this.ctx.lineCap = "round"; // 線を角丸にする
this.ctx.moveTo(x, y);
console.log("globalThis.clickFlg = "+globalThis.clickFlg);
}
},
// 描画処理
"draw":function (x, y, cnvBold, cnvColor ) {
this.ctx.lineWidth = cnvBold;
this.ctx.strokeStyle = 'rgba('+cnvColor+')';
// 初回処理の判定
if (globalThis.clickFlg != "1") {
this.ctx.lineTo(x, y);
console.log("globalThis.clickFlg = "+globalThis.clickFlg);
}
this.ctx.stroke();
},