1. canvas.js
1.1 canvasの初期化
before:
var canvas = document.getElementById("canvas");
after:
root = {
// context
"ctx":null,
"canvas":null,
// canvasの初期化
"init":function () {
this.canvas = document.getElementById('canvas');
this.ctx = this.canvas.getContext('2d');
},
1.2 マウス押下開始、マウス押下終了
before:
canvas.onmousedown = function(e){
// マウス押下開始
root.drawStart(e.offsetX, e.offsetY, cnvBold, cnvColor);
canvas.addEventListener("mousemove" , _mouseMove, false);
}
canvas.onmouseup = function(){
// マウス押下終了
canvas.removeEventListener("mousemove" , _mouseMove, false);
}
after:
root.canvas.onmousedown = function(e){
// マウス押下開始
root.drawStart(e.offsetX, e.offsetY, cnvBold, cnvColor);
root.canvas.addEventListener("mousemove" , _mouseMove, false);
}
root.canvas.onmouseup = function(){
// マウス押下終了
root.canvas.removeEventListener("mousemove" , _mouseMove, false);
}
1.3 canvasを画像で保存
before:
// canvasを画像で保存
var download = document.getElementById("download");
download.onclick = function(){
canvas = document.getElementById('canvas');
var base64 = canvas.toDataURL("image/jpeg");
document.getElementById("download").href = base64;
}
after:
// canvasを画像で保存
var download = document.getElementById("download");
download.onclick = function(){
var base64 = root.canvas.toDataURL("image/jpeg");
document.getElementById("download").href = base64;
}
1.4 canvasの初期化
before:
// ccanvasの初期化
"init":function () {
var cnvs = document.getElementById('canvas');
this.ctx = cnvs.getContext('2d');
},
after:
// ccanvasの初期化
"init":function () {
this.canvas = document.getElementById('canvas');
this.ctx = this.canvas.getContext('2d');
},