<DOCTYPE html><html><head><title>canvas简单动画</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">var index = 20;var x = 1;$(function(){start();var stop = setInterval("start()",5);$('#stop').click(function(){ clearInterval(stop);}); $('#start').click(function(){ stop = setInterval("start()",5);});});var start = function (){ var canvas = $('#myCanvas')[0]; var myCanvas=canvas.getContext("2d"); myCanvas.clearRect(0,0,500,500); //在给定的矩形内清除指定的像素 myCanvas.fillStyle="#FF0000"; //设置或返回用于填充绘画的颜色、渐变或模式 myCanvas.beginPath(); //起始一条路径，或重置当前路径 myCanvas.arc(200,index,20,0,Math.PI*2,1); //x坐标，y坐标，半径，从哪开始画，Math.PI是圆周率，顺时针 myCanvas.closePath(); //创建从当前点回到起始点的路径 myCanvas.fill(); //填充当前绘图（路径 index = index+x; //起点+活动像素位置 if(index==20 || index == 280){ //判断当前线的位置，控制在区域内 x = x*-1; //乘以负一用来调整线路方向 }} </script><head><canvas id="myCanvas" width="500" height="300"></canvas><br><button id="start">开始</button><button id="stop">停止</button></html>
