Forked from: etorov's Canvasに1ピクセル描く View Diff (87) HSV gradation etorov Follow 2011-10-21 03:22:00 License: MIT License Fork1 Fav1 View588 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 88 lines HTML 2 lines CSS 0 lines HSV gradation window.onload = function(){ // おまじない var canvas = document.getElementById('world'); if ( ! canvas || ! canvas.getContext ) { return false; } ctx = canvas.getContext("2d"); var canvas_width = canvas.width; var canvas_height = canvas.height; var image = ctx.createImageData(canvas_width, canvas_height); var rgbdata = []; var start_index = 0; for(var y = 0; y < canvas_height; y++){ for(var x = 0; x < canvas_width; x++){ rgbdata = hsv2rgb((x / canvas_width)*360, (y / canvas_height)*100, 100); start_index = (y*(canvas_width)+x)*4; image.data[start_index] = rgbdata[0]; image.data[start_index+1] = rgbdata[1]; image.data[start_index+2] = rgbdata[2]; image.data[start_index+3] = 255; } } // set ctx.putImageData(image, 0, 0); }; // H 0..360 // S 0..100 // V 0..100 function hsv2rgb(h, s, v){ var H_MAX = 360, S_MAX = 100, V_MAX = 100; // これがないと(360, .., ..)がおかしくなる h = h % H_MAX; if(v > V_MAX){ v = V_MAX; }else if(v < 0){ v = 0; } v = (v/V_MAX) * 255; if(s <= 0){ v = Math.round(v); return [v, v, v]; }else if(s > 100){ s = S_MAX; } s = s / S_MAX; var hi = Math.floor(h/60) % 6, f = (h/60) - hi; p = v * (1-s); q = v * (1 - f*s); t = v * (1 - (1-f)*s); var r = 0, g = 0, b = 0; switch(hi){ case 0: r = v; g = t; b = p; break; case 1: r = q; g = v; b = p; break; case 2: r = p; g = v; b = t; break; case 3: r = p; g = q; b = v; break; case 4: r = t; g = p; b = v; break; case 5: r = v; g = p; b = q; break; default: break; } return [r, g, b]; } <canvas id='world' width='360' height='100'></canvas> <pre id='log'></pre> HSV gradation window.onload = function(){ // おまじない var canvas = document.getElementById('world'); if ( ! canvas || ! canvas.getContext ) { return false; } ctx = canvas.getContext("2d"); var canvas_width = canvas.width; var canvas_height = canvas.height; var image = ctx.createImageData(canvas_width, canvas_height); var rgbdata = []; var start_index = 0; for(var y = 0; y < canvas_height; y++){ for(var x = 0; x < canvas_width; x++){ rgbdata = hsv2rgb((x / canvas_width)*360, (y / canvas_height)*100, 100); start_index = (y*(canvas_width)+x)*4; image.data[start_index] = rgbdata[0]; image.data[start_index+1] = rgbdata[1]; image.data[start_index+2] = rgbdata[2]; image.data[start_index+3] = 255; } } // set ctx.putImageData(image, 0, 0); }; // H 0..360 // S 0..100 // V 0..100 function hsv2rgb(h, s, v){ var H_MAX = 360, S_MAX = 100, V_MAX = 100; // これがないと(360, .., ..)がおかしくなる h = h % H_MAX; if(v > V_MAX){ v = V_MAX; }else if(v < 0){ v = 0; } v = (v/V_MAX) * 255; if(s <= 0){ v = Math.round(v); return [v, v, v]; }else if(s > 100){ s = S_MAX; } s = s / S_MAX; var hi = Math.floor(h/60) % 6, f = (h/60) - hi; p = v * (1-s); q = v * (1 - f*s); t = v * (1 - (1-f)*s); var r = 0, g = 0, b = 0; switch(hi){ case 0: r = v; g = t; b = p; break; case 1: r = q; g = v; b = p; break; case 2: r = p; g = v; b = t; break; case 3: r = p; g = q; b = v; break; case 4: r = t; g = p; b = v; break; case 5: r = v; g = p; b = q; break; default: break; } return [r, g, b]; } <canvas id='world' width='360' height='100'></canvas> <pre id='log'></pre> 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 etorov 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/uLlk/js"></script> color gradation hsv Tweet Twitter Discussion Questions on this code? Tags color gradation hsv Favorite by koichironish Forked sort by latest page views favorite forked HSV color picker etorov 01 562 148/3/4 color hsv
