Forked from: kt9's Many Rectangulars diff(36) Cloud kt9 Follow 2010-09-05 04:27:48 License: MIT License Fork1 Fav0 View550 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 69 lines HTML 1 lines CSS 7 lines Cloud var canvasWidth = document.documentElement.clientWidth * 0.95; var canvasHeight = document.documentElement.clientHeight * 0.95; var blockWidth = 60; var blockHeight = 20; var blockNum = Math.floor( canvasWidth * canvasHeight / ( blockWidth * blockHeight ) ) * 0.08; var places = new Array(); // 雲を作る function Cloud(ctx, x, y) { var arcNumX = 10; var arcNumY = 5; var arcSize = 5; for( var i = 0; i < arcNumX; i++ ) { for( var j = 0; j < arcNumY; j++ ) { var cloudX = x + (blockWidth / arcNumX) * i + Math.random() * blockWidth * 0.7; var cloudY = y + (blockHeight / arcNumY) * j + Math.random() * blockHeight * 0.7; ctx.beginPath(); ctx.fillStyle = 'rgb(' + Number( Math.floor(Math.random() * 185) + 70 ) + ', 0, 0)'; ctx.arc(cloudX, cloudY, arcSize * (Math.random() * 0.7 + 0.8), 0, 2 * Math.PI, false); ctx.fill(); } } } // 描画 function draw(ctx) { var i; // canvasをクリアする ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 雲を作る for(i = 0; i < places.length; i++) { Cloud( ctx, places[i][0], places[i][1]); } } 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'); // 場所を決定 for( i = 0; i < blockNum; i++ ) { places.push( new Array( Math.floor( Math.random() * (canvasWidth - blockWidth) ) + 0.5, Math.floor( Math.random() * (canvasHeight - blockHeight) ) + 0.5 ) ); } // タイマーの設定 draw(ctx); setInterval('draw(ctx)', 50); } <canvas id="canvas"></canvas> Cloud body { overflow: hidden; } canvas { background-color: #000000; } var canvasWidth = document.documentElement.clientWidth * 0.95; var canvasHeight = document.documentElement.clientHeight * 0.95; var blockWidth = 60; var blockHeight = 20; var blockNum = Math.floor( canvasWidth * canvasHeight / ( blockWidth * blockHeight ) ) * 0.08; var places = new Array(); // 雲を作る function Cloud(ctx, x, y) { var arcNumX = 10; var arcNumY = 5; var arcSize = 5; for( var i = 0; i < arcNumX; i++ ) { for( var j = 0; j < arcNumY; j++ ) { var cloudX = x + (blockWidth / arcNumX) * i + Math.random() * blockWidth * 0.7; var cloudY = y + (blockHeight / arcNumY) * j + Math.random() * blockHeight * 0.7; ctx.beginPath(); ctx.fillStyle = 'rgb(' + Number( Math.floor(Math.random() * 185) + 70 ) + ', 0, 0)'; ctx.arc(cloudX, cloudY, arcSize * (Math.random() * 0.7 + 0.8), 0, 2 * Math.PI, false); ctx.fill(); } } } // 描画 function draw(ctx) { var i; // canvasをクリアする ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 雲を作る for(i = 0; i < places.length; i++) { Cloud( ctx, places[i][0], places[i][1]); } } 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'); // 場所を決定 for( i = 0; i < blockNum; i++ ) { places.push( new Array( Math.floor( Math.random() * (canvasWidth - blockWidth) ) + 0.5, Math.floor( Math.random() * (canvasHeight - blockHeight) ) + 0.5 ) ); } // タイマーの設定 draw(ctx); setInterval('draw(ctx)', 50); } <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/4GpB/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/kt9/cloud" title="Cloud">Cloud - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags Tweet twitter Forked sort new page view favorite forked balloon kt9 00 303views 103/1/7
