canvas标签实现动态小球

曾经终败给现在 2022-07-14 05:50 223阅读 0赞

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号

发表评论取消回复

表情：

评论列表（有 0 条评论，223人围观）

还没有评论，来说两句吧...

相关阅读

相关 canvas重力小球 html+css+js

先看效果（完整代码在底部）：因为录屏软件的原因，动画看着有点迟钝，其实是动画很顺畅的~ https://space.bilibili.com/176586698

墨蓝/ 2022年11月17日 14:52/ 0 赞/ 169 阅读

相关 JavaScript canvas实现跟随鼠标移动小球

本文实例为大家分享了js跟随鼠标移动小球的具体代码，供大家参考，具体内容如下 1 2 3 4 5 6 7 8 9 10 11 12

冷不防/ 2022年10月29日 07:51/ 0 赞/ 210 阅读

相关 canvas绘制七彩随机小球！

canvas绘制七彩随机小球 1、题目 > 拿到一个案例，需要在画布上实现不同大小颜色位置的七彩小球，并且要运动起来！ 2、思路 > （1）、第一步需要在页

柔光的暖阳◎/ 2022年10月15日 04:00/ 0 赞/ 197 阅读

相关 canvas标签实现动态小球

Html5 canvas标签实现动态小球话不多说，直接上代码 <canvas id="mycanvas" width="500" height="500" st

曾经终败给现在/ 2022年07月14日 05:50/ 0 赞/ 224 阅读

相关 html5使用canvas实现小球碰撞反弹实例

使用 html5 中的 canvas, 实现小球相互碰撞并反弹,反弹算法比较简单. index.html <!DOCTYPE html> <html lan

缺乏、安全感/ 2022年06月01日 23:42/ 0 赞/ 244 阅读

相关 canvas实现时钟小球掉落效果和倒计时效果

这个也是慕课网学的，挺好玩的，也是canvas实现的2d小球效果，可以把其中的代码注释一下就可以变为倒计时效果。 index.html <!DOCTYPE htm

逃离我推掉我的手/ 2022年03月17日 05:17/ 0 赞/ 253 阅读

相关 canvas小球运动的例子

这是慕课网用canvas写的一个比较简单的2d小球运动的例子 <!DOCTYPE html> <html lang="en"> <head>

小灰灰/ 2022年03月17日 05:08/ 0 赞/ 260 阅读

相关 canvas画小球，头像，文本

/ 画小球 / drawArc: function(ctx, color, w, h) {

深碍√TFBOYSˉ_/ 2021年12月16日 21:25/ 0 赞/ 267 阅读

相关 canvas画布实现创建20个小球,小球在画布内碰壁反弹

![70][] <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-

曾经终败给现在/ 2021年09月16日 04:22/ 0 赞/ 414 阅读

相关绘制canvas彩色泡泡小球碰撞

globalCompositeOperation带来的不一样的烟花 ![20170224163016894][] 一.知识点 1.动画： setInterval(

墨蓝/ 2021年09月11日 07:54/ 0 赞/ 418 阅读