function Colors(){}; var window_state = {}; var box_size = { 'w':20, 'h':20 } Colors.prototype = { getId:function(id){ this.c = document.getElementById(id); }, create_canvas:function(){ var c = document.getElementById('pin'); var ctx = c.getContext('2d'); for(var i=0;i<128;i++){ for(var j=0;j<127;j++){ var r = parseInt(Math.random()*255); var g = parseInt(Math.random()*255); var b = parseInt(Math.random()*255); ctx.fillStyle = 'rgb('+r+','+g+','+b+')'; ctx.fillRect(j*25,i*25,box_size['w'],box_size['h']); } } this.c.appendChild(c); }, w_height:function(){ this.height = window.innerHeight; window_state['height'] = this.height; }, w_width:function(){ this.width = window.innerWidth; window_state['width'] = this.width; }, arranges:function(){ //alert(this.width/10); //alert(this.height/20); return this.width / 10; } };
<html> <body> <head> <title>Colors</title> <script src="colors.js"></script> <style type="text/css"> body{ margin:0; padding:0; } </style> </head> <div id="colorbox"> <canvas id="pin" width="1280" height="1300"></canvas> </div> <script> function main(){ var b = new Colors(); b.getId('colorbox'); b.w_height(); b.w_width(); b.arranges() b.create_canvas(); } setInterval("main()",1000); </script> </body> </html>
カラフルに繰り返す!
まだ途中だから書きかけのコードも含んでるよ。