动画效果_onclick setinterval-CSDN博客

<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>PHP100 HTML5视频教程-canvas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<canvas id="php100" width="500" height="200" ></canvas>
<div id="ds"></div>
<script type="text/javascript">
var canvas = document.getElementById('php100');
var p100=canvas.getContext("2d");

var width=400; //设置线条获得区域宽度
var height=200; //设置线条获得区域高度
var qidian=0 //设置线条起点
var exp=1; //设置线条每次移动像素大小
p100.strokeStyle = "rgba(255,0,0,1)"; //定义颜色

function draw(){
p100.clearRect(0,0,width,height) // 擦除画布一个区域xy、xy
p100.fillStyle="blue"; //定义颜色
p100.beginPath(); //从新开始画，防止冲突重叠
p100.arc(180,qidian,20,0,Math.PI*2,1); //x坐标，y坐标，半径，Math.PI是圆周率
p100.closePath(); //结束画布，防止冲突重叠
p100.fill(); //结束渲染

qidian=qidian+exp; //起点+活动像素位置

if(qidian==0 || qidian==height-1){ //判断当前线的位置，控制在区域内
exp=exp*-1; //乘以负一用来调整线路方向
}

}
//setInterval(code,millisec) 按照指定的周期来调用函数,返回值为定时器的ID值
//clearInterval(idofsetInterval)取消由setInterval()方法设置的定时器。
</script>
<input οnclick="interval=setInterval(draw,5);" value="开始" type="button" />
<input οnclick="clearInterval(interval);" value="停止" type="button" />
</body>
</html>

这是一个简单的demo，直接复制源码就能运行，里面也有些小BUG，但不影响功能上的理解和效果。