Forked from: phi's Paint Tool - tmlib.js 0.1.5 View Diff (39) forked: Paint Tool - tmlib.js 0.1.5 yooo Follow 2017-12-07 09:26:51 License: MIT License Fork0 Fav0 View159 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 98 lines HTML 18 lines LESS 73 lines forked: Paint Tool - tmlib.js 0.1.5 jQuery v1.9.0 tmlib.js v0.1.5 /* *constant */ var SCREEN_WIDTH = 320; var SCREEN_HEIGHT = 320; var SCREEN_CENTER_X = SCREEN_WIDTH/2; var SCREEN_CENTER_Y = SCREEN_HEIGHT/2; var COLOR_LIST = [ "white", "red", "yellow", "green", "cyan", "blue", "purple", "black" ]; /* *main */ tm.main(function(){ var element = tm.dom.Element("#world"); var canvas = tm.graphics.Canvas("#world"); canvas.resize(SCREEN_WIDTH,SCREEN_HEIGHT); canvas.clearColor("white"); canvas.setLineStyle(8,"round","round",10); var pointX = null,pointY = null; element.event.pointstart(function(e){ pointX = e.pointX; pointY = e.pointY; }); element.event.pointmove(function(e){ if(pointX ===null || pointY === null)return; canvas.drawLine(poinX,pointY,e.pointX,e.pointY); pointX = e.pointX;pointY = e.pointY; e.stop(); }); element.event.pointend(function(e){ pointX = null; pointY = null; e.stop(); }); // var colorPalet = tm.dom.Element("#color-palet"); var active = null; for(var i=0,len= COLOR_LIST.length;i<len;++i){ var elm = colorPalet.create("span"); elm.attr.set("class","piece"); elm.backgroundColor = COLOR_LIST[i]; elm.event.click(function(){ canvas.strokeStyle = this.backgroundColor; active.attr.set("class","piece"); this.attr.set("class","piece active"); active = this; }); } active = colorPalet.children.last; active.attr.set("class","piece active"); // tm.dom.Element("#clear").event.click(function(){ canvas.clearColor("white"); }); tm.dom.Element("#save").event.click(function(){ canvas.saveAsImage(); }); tm.dom.Element("#line-width").event.add("change",function(){ canvas.lineWidth = this.value; }); }); <header> <h1> Paint tool - tmlib.js </h1> </header> <section id="main"> <div id="context"> <canvas id='world'></canvas> </div> <div id="color-palet"> </div> <div id="menu"> <input id="line-width" type="range" value="10" min=1 max=20 /> <button id="save">Save</button> <button id="clear">Clear</button> </div> </section> forked: Paint Tool - tmlib.js 0.1.5 * { margin: 0px; padding: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; user-select: none; } body { font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif; } header { background: black; color: white; h1 { padding: 5px 10px; font-size: 16px; } box-shadow: 0px 0px 8px 0px #444; } section { padding: 5px; text-align: center; #context { padding: 8px; canvas { box-shadow: 0px 0px 4px 0px #aaa; width: 320px; height: 320px; } } button { padding: 2px 5px; } #color-palet { text-align: center; .piece { display: inline-block; width: 25px; height: 25px; border: 1px solid #aaa; margin: 1px; &.active { box-shadow: 0px 0px 4px 0px #222; } } } #menu { padding: 5px; text-align: center; #line-width { width: 150px; } } } /* *constant */ var SCREEN_WIDTH = 320; var SCREEN_HEIGHT = 320; var SCREEN_CENTER_X = SCREEN_WIDTH/2; var SCREEN_CENTER_Y = SCREEN_HEIGHT/2; var COLOR_LIST = [ "white", "red", "yellow", "green", "cyan", "blue", "purple", "black" ]; /* *main */ tm.main(function(){ var element = tm.dom.Element("#world"); var canvas = tm.graphics.Canvas("#world"); canvas.resize(SCREEN_WIDTH,SCREEN_HEIGHT); canvas.clearColor("white"); canvas.setLineStyle(8,"round","round",10); var pointX = null,pointY = null; element.event.pointstart(function(e){ pointX = e.pointX; pointY = e.pointY; }); element.event.pointmove(function(e){ if(pointX ===null || pointY === null)return; canvas.drawLine(poinX,pointY,e.pointX,e.pointY); pointX = e.pointX;pointY = e.pointY; e.stop(); }); element.event.pointend(function(e){ pointX = null; pointY = null; e.stop(); }); // var colorPalet = tm.dom.Element("#color-palet"); var active = null; for(var i=0,len= COLOR_LIST.length;i<len;++i){ var elm = colorPalet.create("span"); elm.attr.set("class","piece"); elm.backgroundColor = COLOR_LIST[i]; elm.event.click(function(){ canvas.strokeStyle = this.backgroundColor; active.attr.set("class","piece"); this.attr.set("class","piece active"); active = this; }); } active = colorPalet.children.last; active.attr.set("class","piece active"); // tm.dom.Element("#clear").event.click(function(){ canvas.clearColor("white"); }); tm.dom.Element("#save").event.click(function(){ canvas.saveAsImage(); }); tm.dom.Element("#line-width").event.add("change",function(){ canvas.lineWidth = this.value; }); }); <header> <h1> Paint tool - tmlib.js </h1> </header> <section id="main"> <div id="context"> <canvas id='world'></canvas> </div> <div id="color-palet"> </div> <div id="menu"> <input id="line-width" type="range" value="10" min=1 max=20 /> <button id="save">Save</button> <button id="clear">Clear</button> </div> </section> * { margin: 0px; padding: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; user-select: none; } body { font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif; } header { background: black; color: white; h1 { padding: 5px 10px; font-size: 16px; } box-shadow: 0px 0px 8px 0px #444; } section { padding: 5px; text-align: center; #context { padding: 8px; canvas { box-shadow: 0px 0px 4px 0px #aaa; width: 320px; height: 320px; } } button { padding: 2px 5px; } #color-palet { text-align: center; .piece { display: inline-block; width: 25px; height: 25px; border: 1px solid #aaa; margin: 1px; &.active { box-shadow: 0px 0px 4px 0px #222; } } } #menu { padding: 5px; text-align: center; #line-width { width: 150px; } } } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author yooo Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/ML6r/js"></script> art&design canvas html5 html5_elements&api javascript library&test smartphones&tablets tmlib.js user_interface Discussion Questions on this code? Tags art&design canvas html5 html5_elements&api javascript library&test smartphones&tablets tmlib.js user_interface