Many Rectangulars kt9 Follow 2010-09-03 11:46:35 License: MIT License Fork2 Fav0 View787 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 57 lines HTML 1 lines CSS 7 lines Many Rectangulars var canvasWidth = document.documentElement.clientWidth * 0.95; var canvasHeight = document.documentElement.clientHeight * 0.95; var blockWidth = 40; var blockHeight = 50; var blockNum = Math.floor( canvasWidth * canvasHeight / ( blockWidth * blockHeight ) ); // 矩形を作る function diffColorRect(ctx, x, y) { var crd = new Array( new Array(blockWidth, 0), new Array(0, blockHeight), new Array(-blockWidth, 0), new Array(0, -blockHeight) ); for(var i = 0; i < 4; i++) { var r = Math.floor(Math.random() * 230); var g = Math.floor(Math.random() * 230); ctx.strokeStyle = 'rgb(' + r + ', ' + g + ', 255)'; ctx.beginPath(); ctx.moveTo(x, y); x += crd[i][0]; y += crd[i][1]; ctx.lineTo(x, y); ctx.closePath(); ctx.stroke(); } } // 描画 function draw(ctx) { // canvasをクリアする ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 矩形を作る for(var i = 0; i < blockNum * (Math.random() * 0.3 + 0.7); i++) { diffColorRect( ctx, Math.floor( Math.random() * (canvasWidth - blockWidth) ) + 0.5, Math.floor( Math.random() * (canvasHeight - blockHeight) ) + 0.5 ); } } window.onload = function() { // 描画先canvasのidを取得する var canvas = document.getElementById("canvas"); if( !canvas || !canvas.getContext ) { return flase; } // 大きさを設定 canvas.width = canvasWidth; canvas.height = canvasHeight; // contextを取得する ctx = canvas.getContext('2d'); // タイマーを設定 setInterval('draw(ctx)', 100); } <canvas id="canvas"></canvas> Many Rectangulars body { overflow: hidden; } canvas { background-color: #000000; } var canvasWidth = document.documentElement.clientWidth * 0.95; var canvasHeight = document.documentElement.clientHeight * 0.95; var blockWidth = 40; var blockHeight = 50; var blockNum = Math.floor( canvasWidth * canvasHeight / ( blockWidth * blockHeight ) ); // 矩形を作る function diffColorRect(ctx, x, y) { var crd = new Array( new Array(blockWidth, 0), new Array(0, blockHeight), new Array(-blockWidth, 0), new Array(0, -blockHeight) ); for(var i = 0; i < 4; i++) { var r = Math.floor(Math.random() * 230); var g = Math.floor(Math.random() * 230); ctx.strokeStyle = 'rgb(' + r + ', ' + g + ', 255)'; ctx.beginPath(); ctx.moveTo(x, y); x += crd[i][0]; y += crd[i][1]; ctx.lineTo(x, y); ctx.closePath(); ctx.stroke(); } } // 描画 function draw(ctx) { // canvasをクリアする ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 矩形を作る for(var i = 0; i < blockNum * (Math.random() * 0.3 + 0.7); i++) { diffColorRect( ctx, Math.floor( Math.random() * (canvasWidth - blockWidth) ) + 0.5, Math.floor( Math.random() * (canvasHeight - blockHeight) ) + 0.5 ); } } window.onload = function() { // 描画先canvasのidを取得する var canvas = document.getElementById("canvas"); if( !canvas || !canvas.getContext ) { return flase; } // 大きさを設定 canvas.width = canvasWidth; canvas.height = canvasHeight; // contextを取得する ctx = canvas.getContext('2d'); // タイマーを設定 setInterval('draw(ctx)', 100); } <canvas id="canvas"></canvas> body { overflow: hidden; } canvas { background-color: #000000; } 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 Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/yTl5/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/kt9/many_rects" title="Many Rectangulars">Many Rectangulars - jsdo.it - share JavaScript, HTML5 and CSS</a></p> Tweet twitter Forked sort new page view favorite forked forked from: Many Rectangulars.. onoeri 00 282views 58/1/7 Cloud kt9 10 591views 69/1/7