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