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