Gradient Generator cezinha Follow 2011-08-20 02:44:15 License: MIT License Fork3 Fav3 View1816 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 76 lines HTML 11 lines CSS 5 lines Canvas Gradient Generator Gradient Generator (function() { // renders a rectangle renderRect = function(context, fillStyle, x, y, width, height) { // define default values fillStyle = (fillStyle) || '#ff0000'; x = (x) ? x : 0; y = (y) ? y : 0; width = (width) ? width : 100; height = (height) ? height : 100; context.fillStyle = fillStyle; context.fillRect(x, y, width, height); }; // Fix for colors between 0x0fffff and 0x000000 // by http://jsdo.it/Rafael.Hengles var hexToStr = function(n) { n = n.toString(16); if ( n.length === 6 ) return '#'+n; return '#000000'.substr(0,7-n.length)+n; }; /** * Porting from ActionScript * http://www.pixelwit.com/blog/2007/05/hexadecimal-color-fading/ */ fadeHex = function(hex, hex2, ratio){ var r = hex >> 16; var g = hex >> 8 & 0xFF; var b = hex & 0xFF; r += ((hex2 >> 16)-r)*ratio; g += ((hex2 >> 8 & 0xFF)-g)*ratio; b += ((hex2 & 0xFF)-b)*ratio; return(r<<16 | g<<8 | b); }; strToHex = function(str) { var hex = (str.indexOf("#") === 0) ? str.substring(1) : str; hex = parseInt("0x" + hex, 16); return hex; }; main = function() { // canvas element on document var canvas = document.getElementById("canvas"); // resize canvas to window size canvas.width = window.innerWidth; canvas.height = window.innerHeight; // context 2D var context = canvas.getContext("2d"); // get parameters from form var form = document.formColor; var fromColor = (form.fromHex.value.length > 1) ? form.fromHex.value : "#FFFF00"; startHex = strToHex(fromColor); var toColor = (form.toHex.value.length > 1) ? form.toHex.value : "#FFFF00"; endHex = strToHex(toColor); var steps = (form.steps.value.length > 0) ? parseInt(form.steps.value, 10) : 10; // rectangle settings var rectW = Math.round(canvas.width / steps); var rectH = canvas.height; for(var i=0; i<=steps; i++){ var ratio = i/steps; var x = i*rectW; var y = 0; var nowColor = fadeHex(startHex, endHex, ratio); var color = hexToStr(nowColor); // fix by http://jsdo.it/Rafael.Hengles renderRect(context, color, x, y, rectW, rectH); } }; main(); })(); <h1>Gradient Generator</h1> <h2>Inform from and to color in hexadecimal format</h2> <form name="formColor" onsubmit="main();return false"> From: <input type="text" name="fromHex" value="#FFFF00" size="9" /> To: <input type="text" name="toHex" value="#FF0000" size="9" /> Steps: <input type="text" name="steps" value="16" size="2" /> <input type="submit" value="Render" /> </form> <canvas id='canvas'></canvas> Gradient Generator body{background-color:#fff; font:12px sans-serif;margin:0;padding:0;overflow:hidden} h1{font-size:16px;margin:0.6em 10px 0.4em} h2{font-size:14px;font-weight:normal;margin:0.4em 10px} form{margin:0 10px} canvas{background-color:#fff} Canvas Gradient Generator (function() { // renders a rectangle renderRect = function(context, fillStyle, x, y, width, height) { // define default values fillStyle = (fillStyle) || '#ff0000'; x = (x) ? x : 0; y = (y) ? y : 0; width = (width) ? width : 100; height = (height) ? height : 100; context.fillStyle = fillStyle; context.fillRect(x, y, width, height); }; // Fix for colors between 0x0fffff and 0x000000 // by http://jsdo.it/Rafael.Hengles var hexToStr = function(n) { n = n.toString(16); if ( n.length === 6 ) return '#'+n; return '#000000'.substr(0,7-n.length)+n; }; /** * Porting from ActionScript * http://www.pixelwit.com/blog/2007/05/hexadecimal-color-fading/ */ fadeHex = function(hex, hex2, ratio){ var r = hex >> 16; var g = hex >> 8 & 0xFF; var b = hex & 0xFF; r += ((hex2 >> 16)-r)*ratio; g += ((hex2 >> 8 & 0xFF)-g)*ratio; b += ((hex2 & 0xFF)-b)*ratio; return(r<<16 | g<<8 | b); }; strToHex = function(str) { var hex = (str.indexOf("#") === 0) ? str.substring(1) : str; hex = parseInt("0x" + hex, 16); return hex; }; main = function() { // canvas element on document var canvas = document.getElementById("canvas"); // resize canvas to window size canvas.width = window.innerWidth; canvas.height = window.innerHeight; // context 2D var context = canvas.getContext("2d"); // get parameters from form var form = document.formColor; var fromColor = (form.fromHex.value.length > 1) ? form.fromHex.value : "#FFFF00"; startHex = strToHex(fromColor); var toColor = (form.toHex.value.length > 1) ? form.toHex.value : "#FFFF00"; endHex = strToHex(toColor); var steps = (form.steps.value.length > 0) ? parseInt(form.steps.value, 10) : 10; // rectangle settings var rectW = Math.round(canvas.width / steps); var rectH = canvas.height; for(var i=0; i<=steps; i++){ var ratio = i/steps; var x = i*rectW; var y = 0; var nowColor = fadeHex(startHex, endHex, ratio); var color = hexToStr(nowColor); // fix by http://jsdo.it/Rafael.Hengles renderRect(context, color, x, y, rectW, rectH); } }; main(); })(); <h1>Gradient Generator</h1> <h2>Inform from and to color in hexadecimal format</h2> <form name="formColor" onsubmit="main();return false"> From: <input type="text" name="fromHex" value="#FFFF00" size="9" /> To: <input type="text" name="toHex" value="#FF0000" size="9" /> Steps: <input type="text" name="steps" value="16" size="2" /> <input type="submit" value="Render" /> </form> <canvas id='canvas'></canvas> body{background-color:#fff; font:12px sans-serif;margin:0;padding:0;overflow:hidden} h1{font-size:16px;margin:0.6em 10px 0.4em} h2{font-size:14px;font-weight:normal;margin:0.4em 10px} form{margin:0 10px} canvas{background-color:#fff} use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Canvas Gradient Generator Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author cezinha URLhttp://www.cezinha.com.br @cezinha coder, gamer, flash addict, js addict 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/4qyU/js"></script> canvas color Tweet Twitter Discussion Questions on this code? Tags canvas color Favorite by vincicat kleinschmidt ethertank Forked sort by latest page views favorite forked forked: Gradient Generator paul.lindqui 00 93 77/11/5 canvas color forked: Gradient Generator puntonero 10 206 90/13/5 canvas color forked: Gradient Generator Rafael.Hengl 01 589 76/11/5 canvas color
