Forked from: kt9's Many Rectangulars diff(36) Cloud kt9 Follow 2010-09-05 04:27:48 License: MIT License Fork1 Fav0 View591 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 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/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> Tweet twitter Forked sort new page view favorite forked balloon kt9 00 344views 103/1/7
