canvas标签实现动态小球
Html5 canvas标签实现动态小球
话不多说,直接上代码
<canvas id="mycanvas" width="500" height="500" style="border:1px solid red">不支持H5</canvas>//canvas标签
<div id="div"></div> //定义一个显示效果的层div
//定义两个按钮,实现小球的动与停功能
<button id="btn1" onclick="colse=setInterval(drawBall,100)">开始</button>
<button id="btn2" onclick="clearInterval(colse)">结束</button>
<script type="text/javascript">
var a=document.getElementById("mycanvas");
var cxt=a.getContext("2d");
//定义一个球类
var ball={x:10,y:100,dir_x:10,dir_y:5};
function drawBall(){
//画圆
cxt.beginPath();
cxt.fillStyle="green";
cxt.arc(ball.x,ball.y,10,0,Math.PI*2);
cxt.fill();//清除渲染
//球动起来
//ball.dir_x += Math.random()*2; //可实现小球不规则运动
ball.x+=ball.dir_x; //控制x轴方向
//ball.dir_y += Math.random()*2;
ball.y+=ball.dir_y; //控制y轴方向
//判断小球运动方向
if(ball.x<0 || ball.x>500){
ball.dir_x*=-1;
}
if(ball.y<0 || ball.y>500){
ball.dir_y*=-1;
}
}
</script>
实现动态小球的重要函数在于setInterval(code,time),这个方法实现不停调用第一个参数的方法,间隔时间为第二个参数(毫秒)。clearInterval()函数则可以关闭setInterval()方法,实现暂停功能。
第一次写博客,希望可能帮到你!
2016年11月29号