1. // main.js
brfore:
root.setBgColor(root.bgColor);
after:
2. // canvas.js
2.1 プロパティにアクセスするファンクションを追加
brfore:
function rootCreate () {
after:
function rootCreate () { // context this.ctx = null; this.canvas = null; this.cnvWidth = 500; this.cnvHeight = 500; // 変数宣言 this.bgColor = "transparent"; this.getCanvas = () => { return this.canvas; } this.setCanvas = (canvas) => { this.canvas = canvas; } this.getCtx = () => { return this.ctx; } this.setCtx = (ctx) => { this.ctx = ctx; } this.getCnvWidth = () => { return this.cnvWidth; } this.getCnvHeight = () => { return this.cnvHeight; } this.getCnvColor = () => { return this.cnvColor; }; this.getCnvBold = () => { return this.cnvBold; }; this.getBgColor = () => { return this.bgColor; };
2.2 マウス押下開始
brfore:
// マウス押下開始 this.drawStart(e.offsetX, e.offsetY, this.cnvBold, this.cnvColor);
after:
// マウス押下開始 this.drawStart(e.offsetX, e.offsetY, this.getCnvBold(), this.getCnvColor());
2.3 マウス押下終了
brfore:
// マウス押下終了 this.canvas.removeEventListener("mousemove" , this.mouseMove, false);
after:
// マウス押下終了 let canvas = this.getCanvas(); canvas.removeEventListener("mousemove" , this.mouseMove, false);
2.4 // canvas上でのイベント
brfore:
// canvas上でのイベント this.draw(e.offsetX, e.offsetY, this.cnvBold, this.cnvColor);
after:
// canvas上でのイベント this.draw(e.offsetX, e.offsetY, this.getCnvBold(), this.getCnvColor());
2.5 canvasの背景色を設定(指定がない場合にjpeg保存すると背景が黒になる)
brfore:
// canvasの背景色を設定(指定がない場合にjpeg保存すると背景が黒になる) let ctx = this.getCtx(); ctx.fillStyle = bgColor; ctx.fillRect(0, 0, this.getCnvWidth(), this.getCnvHeight());
after:
// canvasの背景色を設定(指定がない場合にjpeg保存すると背景が黒になる) this.ctx.fillStyle = bgColor; this.ctx.fillRect(0, 0, this.cnvWidth, this.cnvHeight);