RGB BALL mu3yo2 Follow 2011-06-20 15:55:25 License: MIT License Fork0 Fav1 View973 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 68 lines HTML 1 lines CSS 6 lines RGB BALL var context, interval = 30, fill = 0.03, speed = 0.03, radius = 40, size = 80, w = 400, h = 400, cntX = w / 2, cntY = h / 2, r = 0, colors = ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)', 'rgba(0, 0, 255, 1)'], balls = [], ang = (360 / colors.length) * (Math.PI / 180); function setup() { var l = colors.length, i = 0; for (; i < l; i++) { var ball = {x:0, y:0, color:colors[i]}; balls.push(ball); } var canvas = document.createElement('canvas'); context = canvas.getContext('2d'); canvas.setAttribute('width', w + 'px'); canvas.setAttribute('height', h + 'px'); document.body.appendChild(canvas); setInterval(loop, interval); } function loop() { context.beginPath(); context.globalCompositeOperation = "source-over"; context.fillStyle = "rgba(0, 0, 0, " + fill + ")"; context.fillRect(0, 0, w, h); context.globalCompositeOperation = "lighter"; var _rad = radius + Math.cos(r) * 50, l = colors.length, i = 0; for (; i < l; i++) { var ball = balls[i]; ball.x = Math.cos(r + ang * i) * _rad + cntX; ball.y = Math.sin(r + ang * i) * _rad + cntY; var grad = context.createRadialGradient(ball.x, ball.y, size * 0.2, ball.x, ball.y, size); grad.addColorStop(0, ball.color); grad.addColorStop(1, "rgba(0, 0, 0, 0)"); context.fillStyle = grad; context.rect(ball.x - size, ball.y - size, ball.x + size, ball.y + size); context.fill(); } context.closePath(); r += speed; } setup(); <canvas id='world'></canvas> RGB BALL body, html { background:#000; } canvas { background:#000; } var context, interval = 30, fill = 0.03, speed = 0.03, radius = 40, size = 80, w = 400, h = 400, cntX = w / 2, cntY = h / 2, r = 0, colors = ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)', 'rgba(0, 0, 255, 1)'], balls = [], ang = (360 / colors.length) * (Math.PI / 180); function setup() { var l = colors.length, i = 0; for (; i < l; i++) { var ball = {x:0, y:0, color:colors[i]}; balls.push(ball); } var canvas = document.createElement('canvas'); context = canvas.getContext('2d'); canvas.setAttribute('width', w + 'px'); canvas.setAttribute('height', h + 'px'); document.body.appendChild(canvas); setInterval(loop, interval); } function loop() { context.beginPath(); context.globalCompositeOperation = "source-over"; context.fillStyle = "rgba(0, 0, 0, " + fill + ")"; context.fillRect(0, 0, w, h); context.globalCompositeOperation = "lighter"; var _rad = radius + Math.cos(r) * 50, l = colors.length, i = 0; for (; i < l; i++) { var ball = balls[i]; ball.x = Math.cos(r + ang * i) * _rad + cntX; ball.y = Math.sin(r + ang * i) * _rad + cntY; var grad = context.createRadialGradient(ball.x, ball.y, size * 0.2, ball.x, ball.y, size); grad.addColorStop(0, ball.color); grad.addColorStop(1, "rgba(0, 0, 0, 0)"); context.fillStyle = grad; context.rect(ball.x - size, ball.y - size, ball.x + size, ball.y + size); context.fill(); } context.closePath(); r += speed; } setup(); <canvas id='world'></canvas> body, html { background:#000; } canvas { background:#000; } 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/3lq6/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/mu3yo2/3lq6" title="RGB BALL">RGB BALL - jsdo.it - share JavaScript, HTML5 and CSS</a></p> Tweet twitter Favorite by MohsenReza Forked sort new page view favorite forked forked: RGB BALL dharmaone 00 159views 69/1/6
