05->06 JavaScript 変更

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();
        },