light gryng02 Follow 2010-07-24 22:05:53 License: MIT License Fork32 Fav6 View17928 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 85 lines HTML 2 lines CSS 42 lines light jQuery v1.4.2 $(function () { sizing(); var hyperspace = new Hyperspace(); hyperspace.draw(); $("#canv").fadeIn('fast'); $(window).resize(function() { sizing(); hyperspace.draw(); }); }); function sizing(){ $("#canv").attr({height:$("#wrapper").height()}); $("#canv").attr({width:$("#wrapper").width()}); } var Hyperspace = function(){ var canvas = document.getElementById('canv'); var ctx = canvas.getContext('2d'); //background ctx.fillRect(0, 0, canvas.width, canvas.height); var star = new Array(10); for( i=0; i<star.length; i++ ){ star[i] = new Array(7); star[i][0] = Math.random()*canvas.width; // x star[i][1] = Math.random()*canvas.height; // y star[i][2] = Math.random()*canvas.width/3 + canvas.width/6; // r star[i][3] = Math.random()*0.05 + 0.2; star[i][7] = true; var r = Math.random()*255; // R var g = Math.random()*255; // G var b = Math.random()*255; // B r = Math.ceil(r); g = Math.ceil(g); b = Math.ceil(b); star[i][4] = r; //r star[i][5] = g; //g star[i][6] = b; //b } //draw ------------------------------------- var draw = function draw(){ //reset ctx.globalCompositeOperation = "source-over"; //ctx.fillStyle = "rgba(255, 255, 255, 1)"; ctx.fillStyle = "rgba(0, 0, 0, 1)"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.globalCompositeOperation = "lighter"; //point for(i=0; i<star.length; i++){ ctx.beginPath(); var edgecolor1 = "rgba(" + star[i][4] + "," + star[i][5] + "," + star[i][6] + ",0.93)"; var edgecolor2 = "rgba(" + star[i][4] + "," + star[i][5] + "," + star[i][6] + ",0.6)"; var edgecolor3 = "rgba(" + star[i][4] + "," + star[i][5] + "," + star[i][6] + ",0.1)"; var edgecolor4 = "rgba(" + star[i][4] + "," + star[i][5] + "," + star[i][6] + ",0)"; var gradblur = ctx.createRadialGradient(star[i][0], star[i][1], 0, star[i][0], star[i][1], star[i][2]); gradblur.addColorStop(0,edgecolor1); gradblur.addColorStop(0.4,edgecolor1); gradblur.addColorStop(0.7,edgecolor2); gradblur.addColorStop(0.9,edgecolor3); gradblur.addColorStop(1,edgecolor4); ctx.fillStyle = gradblur; ctx.arc(star[i][0], star[i][1], star[i][2], 0, Math.PI*2, false); ctx.fill(); } }; return ({'draw': draw}); }; <div id="wrapper"><canvas id='canv'></canvas></div> light html{ min-height: 100%; overflow: auto; position:relative; z-index: 1; background: #000; } body{ min-height: 100%; margin: 0; padding: 0; overflow: auto; position: relative; z-index: 1; font-size: 13px; color: #000; font-family: sans-serif; line-height: 1.7; } body > #wrapper{ height: auto; overflow: auto; position: fixed; z-index: 1; } #wrapper{ width: 100%; height:100%; min-height:100%; position: fixed; z-index: 1; } canvas{ display: none; z-index: 1; position: fixed; } $(function () { sizing(); var hyperspace = new Hyperspace(); hyperspace.draw(); $("#canv").fadeIn('fast'); $(window).resize(function() { sizing(); hyperspace.draw(); }); }); function sizing(){ $("#canv").attr({height:$("#wrapper").height()}); $("#canv").attr({width:$("#wrapper").width()}); } var Hyperspace = function(){ var canvas = document.getElementById('canv'); var ctx = canvas.getContext('2d'); //background ctx.fillRect(0, 0, canvas.width, canvas.height); var star = new Array(10); for( i=0; i<star.length; i++ ){ star[i] = new Array(7); star[i][0] = Math.random()*canvas.width; // x star[i][1] = Math.random()*canvas.height; // y star[i][2] = Math.random()*canvas.width/3 + canvas.width/6; // r star[i][3] = Math.random()*0.05 + 0.2; star[i][7] = true; var r = Math.random()*255; // R var g = Math.random()*255; // G var b = Math.random()*255; // B r = Math.ceil(r); g = Math.ceil(g); b = Math.ceil(b); star[i][4] = r; //r star[i][5] = g; //g star[i][6] = b; //b } //draw ------------------------------------- var draw = function draw(){ //reset ctx.globalCompositeOperation = "source-over"; //ctx.fillStyle = "rgba(255, 255, 255, 1)"; ctx.fillStyle = "rgba(0, 0, 0, 1)"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.globalCompositeOperation = "lighter"; //point for(i=0; i<star.length; i++){ ctx.beginPath(); var edgecolor1 = "rgba(" + star[i][4] + "," + star[i][5] + "," + star[i][6] + ",0.93)"; var edgecolor2 = "rgba(" + star[i][4] + "," + star[i][5] + "," + star[i][6] + ",0.6)"; var edgecolor3 = "rgba(" + star[i][4] + "," + star[i][5] + "," + star[i][6] + ",0.1)"; var edgecolor4 = "rgba(" + star[i][4] + "," + star[i][5] + "," + star[i][6] + ",0)"; var gradblur = ctx.createRadialGradient(star[i][0], star[i][1], 0, star[i][0], star[i][1], star[i][2]); gradblur.addColorStop(0,edgecolor1); gradblur.addColorStop(0.4,edgecolor1); gradblur.addColorStop(0.7,edgecolor2); gradblur.addColorStop(0.9,edgecolor3); gradblur.addColorStop(1,edgecolor4); ctx.fillStyle = gradblur; ctx.arc(star[i][0], star[i][1], star[i][2], 0, Math.PI*2, false); ctx.fill(); } }; return ({'draw': draw}); }; <div id="wrapper"><canvas id='canv'></canvas></div> html{ min-height: 100%; overflow: auto; position:relative; z-index: 1; background: #000; } body{ min-height: 100%; margin: 0; padding: 0; overflow: auto; position: relative; z-index: 1; font-size: 13px; color: #000; font-family: sans-serif; line-height: 1.7; } body > #wrapper{ height: auto; overflow: auto; position: fixed; z-index: 1; } #wrapper{ width: 100%; height:100%; min-height:100%; position: fixed; z-index: 1; } canvas{ display: none; z-index: 1; position: fixed; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit http://jsdo.it/gryng02/rNxn light Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/rNxn/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/gryng02/rNxn" title="light">light - jsdo.it - share JavaScript, HTML5 and CSS</a></p> canvas Tweet twitter Tags art&design canvas html5_elements&api Favorite by phongjalvn fukusuke8gou.. kkAyataka jaricky ngtn mash: おー Forked sort new page view favorite forked forked: light tommy79 00 27views 86/2/42 canvas forked: light ariari001 00 30views 86/2/42 canvas forked: light watarunakash.. 00 26views 86/2/42 canvas forked: light helianthuswi.. 00 54views 86/2/42 canvas 1 2 3 4 5 6 7 8NEXT>>