<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> #canvas-wrapper{ width: 1200px; height: 800px; position: relative; margin:50px auto; } #canvas{ border: 1px #ddd solid; } #controller{ position: absolute; top:30px; left:30px; background:rgba(0,85,116,0.7); padding:5px 20px 25px 20px; border-radius: 10px 10px; } #controller h1{ color: white; font-weight: bold; font-family: "Microsoft Yahei"; } #controller #canvas-btn{ display: inline-block; background: #8b0; color: white; font-size: 14px; padding: 5px 15px; } #controller #canvas-btn:hover{ text-decoration: none; background:#7a0; } #controller .color-btn{ display: inline-block; padding:5px 15px; border-radius: 6px 6px; font-size: 14px; margin-top: 10px; margin-right: 5px; text-decoration: none; } #controller .color-btn:hover{ text-decoration: none; } #controller #white-color-btn{ background-color: white; } #controller #black-color-btn{ background-color: black; } </style> <body> <div id="canvas-wrapper"> <canvas id="canvas"> 当前游览器不支持Canvas,请更换游览器再试！ </canvas> <div id="controller"> <h1>Canvas 绘图之旅</h1> <a href="#" id="canvas-btn">stop</a> <a href="#" class="color-btn" id="white-color-btn">white</a> <a href="#" class="color-btn" id="black-color-btn">black</a> </div> </div> <script> var balls = []; var isMoving = true; var themeColor = "white"; var canvas = document.getElementById("canvas"); window.onload = function(){ canvas.width = 1200; canvas.height = 800; if(canvas.getContext('2d')){ var context = canvas.getContext('2d'); // 产生100个小球 for(var i=0;i<100;i++){ var R = Math.floor(Math.random()*255); var G = Math.floor(Math.random()*255); var B = Math.floor(Math.random()*255); var radius = Math.random()*50+20; aBall = { color : "rgb(" + R + "," + G + "," + B + ")", radius : radius, x : Math.random()*(canvas.width-2*radius) + radius, y : Math.random()*(canvas.height-2*radius) + radius, vx : (Math.random()*5 + 5) * Math.pow(-1,Math.floor(Math.random()*100)), vy : (Math.random()*5 + 5) * Math.pow(-1,Math.floor(Math.random()*100)), } balls[i] = aBall; } // 绘制并运动 setInterval(function(){ draw(context); if(isMoving){ update(canvas.width,canvas.height) } },50) // stop document.getElementById("canvas-btn").onclick = function(event){ if(isMoving){ isMoving = false; this.text = "start"; }else{ isMoving = true; this.text = "stop"; } return false; } // white document.getElementById("white-color-btn").onclick = function(event){ themeColor = "white"; return false; } // black document.getElementById("black-color-btn").onclick = function(event){ themeColor = "black"; return false; } }else{ alert("当前游览器不支持Canvas,请更换游览器再试！") } } function draw(cxt){ // var canvas = cxt.canvas; cxt.clearRect(0,0,canvas.width,canvas.height); if(themeColor == "black"){ console.log("black theme"); cxt.fillStyle = "black"; cxt.fillRect(0,0,canvas.width,canvas.height) } for(var i=0;i<balls.length;i++){ cxt.fillStyle = balls[i].color; cxt.beginPath(); cxt.arc(balls[i].x,balls[i].y,balls[i].radius,0,Math.PI*2); cxt.closePath(); cxt.fill(); } } function update(){ for(var i=0;i<balls.length;i++){ balls[i].x += balls[i].vx; balls[i].y += balls[i].vy; // 边缘检测 if(balls[i].x - balls[i].radius <= 0){ balls[i].vx = -balls[i].vx; balls[i].x = balls[i].radius; } if(balls[i].x + balls[i].radius >= canvas.width){ balls[i].vx = -balls[i].vx; balls[i].x = canvas.width - balls[i].radius; } if(balls[i].y - balls[i].radius <= 0){ balls[i].vy = -balls[i].vy; balls[i].y = balls[i].radius; } if(balls[i].y + balls[i].radius >= canvas.height){ balls[i].vy = -balls[i].vy; balls[i].y = canvas.height - balls[i].radius; } } } </script> </body> </html>