Many Rectangulars kt9 Follow 2010-09-03 11:46:35 License: MIT License Fork2 Fav0 View741 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 Tweet QR code Embed Design view Code view <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> zip tags Tweet twitter Forked sort new page view favorite forked forked from: Many Rectangulars.. onoeri 00 271views 58/1/7 Cloud kt9 10 550views 69/1/7
