<!DOCTYPE html>
<html><head lang="en"> <meta charset="UTF-8"> <title>运动的小球</title> <style> body{ background-color: #dddddd; } #canvas{ background-color: #ffffff; margin-top: 10px; margin-left: 20px; box-shadow: 3px 3px 6px rgba(0,0,0,0.5); } #anibtn{ width: 79px; font-size: 20px; height: 30px; letter-spacing: 10px; text-align: center; padding: 5px; background-color: pink; color: #ffffff; font-family: "宋体"; } </style></head><body><input type="button" value="stop" id = "anibtn"><br><canvas id = "canvas" width = "800" height="600">浏览器不支持画布</canvas><script src="animation_extend.js"></script><script type="text/javascript"> var canvas = document.getElementById("canvas"); var canv = canvas.getContext("2d");var x = 150,y = 250;
var dx = 5,dy = 2; var b = false; function animate(){ if(b){ canv.clearRect(0,0,800,600); canv.beginPath(); canv.arc(x,y,25,0,Math.PI*2,true); var grd = canv.createRadialGradient(x,y,0,x,y,25); grd.addColorStop(0,"white"); grd.addColorStop(0.5,"yellow"); grd.addColorStop(1,"red"); canv.fillStyle = grd; canv.strokeStyle = "grey"; canv.closePath(); canv.fill(); canv.stroke(); x+=dx; if(x>775||x<25){ dx = -dx; } window.requestAnimationFrame(animate,canvas); } y-=dy; if(y>575||y<25){ dy = -dy; } } animate(); function change(){ b!=b; var btn = document.getElementById("anibtn"); if(btn.value == "stop"){ btn.value = "停止"; animate(); }else{ btn.value = "运动"; } }</script></body></html>