DIR : /home/kozerus/public_html/jkwii/js/jsdoit/forked_abflowe_windmil1/index.js

/home/kozerus/public_html/jkwii/js/jsdoit/forked_abflowe_windmil1

// forked from gisarahi's "alphabet flower" http://jsdo.it/gisarahi/gop1
(function(){
    var $ = function(id){return document.getElementById(id);};
    var cv = document.getElementById("cv");
    var ctx = cv.getContext("2d");
    var rotateInterval = false;
    
    function generate(){
	var val = $("abc").value;
	alphabetflower(val);
    }
    function alphabetflower(val){
        var num = Number($("num").value);
        var r = Number($("range").value);
        var angle = 360 / num;
      
	ctx.clearRect(0, 0, 256, 256);
        // background
        var bgcolor = rgb2c($("r").value, $("g").value, $("b").value);

        ctx.fillStyle = bgcolor;
        ctx.fillRect(0, 0, 256, 256);
        // text properties
	ctx.font = '128px serif';
	ctx.textAlign = "center";
	ctx.textBaseline = "middle";
	ctx.fillStyle = "#000000";
        // draw flower
        ctx.translate(cv.width/2, cv.height/2);
        for(var i = 0;i < num;i++){
            ctx.fillText(val, 0, r);
            ctx.rotate(angle * Math.PI / 180);
        }
        ctx.translate(-cv.width/2, -cv.height/2);
    }
    function rgb2c(r, g, b){
        var rv = new Number(r);
        var gv = new Number(g);
        var bv = new Number(b);
        var str = "#";

        rv = rv.toString(16);
        gv = gv.toString(16);
        bv = bv.toString(16);
        if(rv.length === 1){rv = "0" + rv;}
        if(gv.length === 1){gv = "0" + gv;}
        if(bv.length === 1){bv = "0" + bv;}
        str += rv + gv + bv;
        return str;
    }
    function save(){
	var tmp = cv.toDataURL("image/png");
	window.open(tmp);
    }
    function clear(){
	ctx.clearRect(0, 0, 256, 256);
    }
    function init(){
        generate();
        $("generate").addEventListener("click", generate, false);
        $("abc").addEventListener("click", generate, false);
        $("num").addEventListener("change", generate, false);
        $("range").addEventListener("change", generate, false);
        $("save").addEventListener("click", save, false);
        $("clear").addEventListener("click", clear, false);
	$("spin").addEventListener("click", rotate, false);
	$("stop").addEventListener("click", stop, false);
        $("r").addEventListener("change", generate, false);
        $("g").addEventListener("change", generate, false);
        $("b").addEventListener("change", generate, false);
    }
    function rotate(){
	clearInterval(rotateInterval);
	ctx.restore();
	ctx.save();
	rotateInterval = setInterval(
	    function(){
	        ctx.translate(cv.width / 2, cv.height / 2);
	        ctx.rotate(Math.PI / 50);	
	        var val = $("abc").value;
	        ctx.translate(-cv.width / 2, -cv.height / 2);
	        generate(val);
	}, 10);
    };
    function stop(){
	clearInterval(rotateInterval);  
	ctx.restore();
	var val = $("abc").value;
	generate(val);
    }
    window.addEventListener("load", init, false);
})();