HTML5画布游戏动态背景设计效果
使用HTML5画布基础方法arc生成的一个动态背景效果~~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>画布背景</title> <style type="text/css"> body { margin:0px; padding:0px; text-align:center; } canvas{ outline:0; margin-left: auto; margin-right: auto; } </style> </head> <body> <canvas id='c'></canvas> <script> /*Javascript代码片段*/ var width = 1000, height = 1000, c = document.getElementById('c'), ctx = c.getContext('2d'); c.width = width; c.height = height; var clear = function(){ ctx.fillStyle = '#d0e7f9'; ctx.beginPath(); ctx.rect(0, 0, width, height); ctx.closePath(); ctx.fill(); } var howManyCircles = 8, circles = []; for (var i = 0; i < howManyCircles; i++) circles.push([Math.random() * width, Math.random() * height, Math.random() * 100, Math.random() / 2]); var DrawCircles = function(){ for (var i = 0; i < howManyCircles; i++) { ctx.fillStyle = 'rgba(255, 255, 255, ' + circles[i][3] + ')'; ctx.beginPath(); ctx.arc(circles[i][0], circles[i][1], circles[i][2], 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); } }; var MoveCircles = function(deltaY){ for (var i = 0; i < howManyCircles; i++) { if (circles[i][1] - circles[i][2] > height) { circles[i][0] = Math.random() * width; circles[i][2] = Math.random() * 100; circles[i][1] = 0 - circles[i][2]; circles[i][3] = Math.random() / 2; } else { circles[i][1] += deltaY; } } }; var width = 1000, height = 1000, gLoop; var GameLoop = function(){ clear(); MoveCircles(3); DrawCircles(); gLoop = setTimeout(GameLoop, 1000 / 50); } GameLoop(); </script> </body> </html>
.