Forked from: cezinha's Gradient Generator View Diff (10) forked: Gradient Generator Rafael.Hengl Follow 2011-07-19 22:22:17 License: MIT License Fork0 Fav1 View1802 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 76 lines HTML 11 lines CSS 5 lines forked: Gradient Generator // forked from cezinha's "Gradient Generator" http://jsdo.it/cezinha/4qyU // Fix for colors between 0x0fffff and 0x000000 (function() { // renders a rectangle var 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); }; 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); 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> forked: 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} // forked from cezinha's "Gradient Generator" http://jsdo.it/cezinha/4qyU // Fix for colors between 0x0fffff and 0x000000 (function() { // renders a rectangle var 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); }; 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); 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? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author Rafael.Hengles 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/4IXW/js"></script> canvas color Discussion Questions on this code? Tags canvas color Favorite by xor
