2017-12-07 09:26:51

License: MIT License

Fork: 0

Fav: 0

View: 230

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

/*
 *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;
    });
    
});

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

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

yooo

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/ML6r/js"></script>

QR Code

Discussion

Questions on this code?

forked: Paint Tool - tmlib.js 0.1.5

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags