<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="canvas" style="margin:0 auto;border:1px #ddd solid"> The current browser does not support Canvas, can replace the browser a try! </canvas> <script> var searchLight = { x : 400, y : 400, radius : 150, vx : Math.random() * 5 + 10, vy : Math.random() * 5 + 10 } window.onload = function(){ var canvas = document.getElementById('canvas'); canvas.width = 1024; canvas.height = 768; if(canvas.getContext('2d')){ var context = canvas.getContext('2d'); setInterval(function(){ draw(context); update(canvas.width,canvas.height); },40); }else{ alert('当前游览器不支持Canvas，请更换游览器后再试！'); } } function draw(cxt){ var canvas = cxt.canvas; cxt.clearRect(0,0,canvas.width,canvas.height); cxt.save(); cxt.beginPath(); cxt.fillStyle = "#000"; cxt.fillRect(0,0,canvas.width,canvas.height) cxt.closePath(); cxt.beginPath(); cxt.arc(searchLight.x,searchLight.y,searchLight.radius,0,Math.PI*2); cxt.fillStyle = "#fff"; cxt.fill(); cxt.clip(); cxt.closePath(); cxt.font = "bold 150px Arial"; cxt.textAlign = "center"; cxt.textBaseline = "middle"; cxt.fillStyle = "#058"; cxt.fillText("Canvas",canvas.width/2,canvas.height/4); cxt.fillText("Canvas",canvas.width/2,canvas.height/2); cxt.fillText("Canvas",canvas.width/2,canvas.height * 3/4); cxt.restore(); } function update(canvasWidth,canvasHeight){ searchLight.x += searchLight.vx; searchLight.y += searchLight.vy; if(searchLight.x - searchLight.radius <= 0){ searchLight.vx = -searchLight.vx; searchLight.x = searchLight.radius; } if(searchLight.x + searchLight.radius >= canvasWidth){ searchLight.vx = -searchLight.vx; searchLight.x = canvasWidth - searchLight.radius; } if(searchLight.y - searchLight.radius <= 0){ searchLight.vy = -searchLight.vy; searchLight.y = searchLight.radius; } if(searchLight.y + searchLight.radius >= canvasHeight){ searchLight.vy = -searchLight.vy; searchLight.y = canvasHeight - searchLight.radius; } } </script> </body> </html>