欲观看动态效果请点此下载代码并用Chrome或者Firefox打开。

图例：

代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>更多碰撞球 19.3.4 8:53 by:逆火狂飙 horn19782016@163.com</title>

     <style>
     #canvas{
        background:#ffffff;
        cursor:pointer;
        margin-left:10px;
        margin-top:10px;
        -webkit-box-shadow:3px 3px 6px rgba(0,0,0,0.5);
        -moz-box-shadow:3px 3px 6px rgba(0,0,0,0.5);
        box-shadow:3px 3px 6px rgba(0,0,0,0.5);
     }

     #controls{
        margin-top:10px;
        margin-left:15px;
     }
     </style>

    </head>

     <body onload="init()">
        <div id="controls">
            <input id='animateBtn' type='button' value='运动'/>
        </div>

        <canvas id="canvas" width="750px" height="500px" >
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
var paused=true;
animateBtn.onclick=function(e){
    paused=! paused;

    if(paused){
        animateBtn.value="运动";
    }else{

        animateBtn.value="暂停";
        window.requestAnimationFrame(animate);
    }
}
//生成从minNum到maxNum的随机数
function randomNum(minNum,maxNum){
    switch(arguments.length){
        case 1:
            return parseInt(Math.random()*minNum+1,10);
        break;
        case 2:
            return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
        break;
            default:
                return 0;
            break;
    }
}

var ctx;// 绘图环境
var balls=[];// 球数组
function init(){

    var canvas=document.getElementById('canvas');
    canvas.width=750;
    canvas.height=500;
    ctx=canvas.getContext('2d');

    for(var i=0;i<500;i++){
        var ball={};
        ball.x=randomNum(0,canvas.width);
        ball.y=randomNum(0,canvas.height);

        ball.vx=randomNum(-10,10);
        ball.vy=randomNum(-10,10);
        ball.radius=25;
        var r=randomNum(0,255);
        var g=randomNum(0,255);
        var b=randomNum(0,255);
        ball.innerColor='rgba('+r+','+g+','+b+',1)';
        ball.middleColor='rgba('+r+','+g+','+b+',0.5)';
        ball.outerColor='rgba('+r+','+g+','+b+',0.3)';
        ball.strokeStyle='rgba('+r+','+g+','+b+')';

        balls.push(ball);
    }
};

function update(){
    for(var i=0;i<balls.length;i++){
        var ball=balls[i];

        // 与左右墙壁的碰撞检测
        if(ball.x+ball.vx+ball.radius>ctx.canvas.width || ball.x+ball.vx-ball.radius<0){
            ball.vx=-ball.vx;
        }

        // 与上下墙壁的碰撞检测
        if(ball.y+ball.vy+ball.radius>ctx.canvas.height || ball.y+ball.vy-ball.radius<0){
            ball.vy=-ball.vy;
        }

        // 小球之前的碰撞检测
        for(var j=0;j<balls.length;j++){
            if(i!=j){
                var other=balls[j];

                var distance=Math.sqrt( Math.pow((ball.x+ball.vx-other.x-other.vx),2)+Math.pow((ball.y+ball.vy-other.y-other.vy),2));

                if(distance<ball.radius+other.radius){
                    // 如果两个碰撞小球的质量相等，联立动量守恒和能量守恒方程时可解得：两个小球碰撞后交换速度。
                    var x=ball.vx;
                    ball.vx=other.vx;
                    other.vx=x;

                    var y=ball.vy;
                    ball.vy=other.vy;
                    other.vy=y;
                }
            }
        }

        ball.x+=ball.vx;
        ball.y+=ball.vy;
    }
}

function draw(){
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

    for(var i=0;i<balls.length;i++){
        var ball=balls[i];

        gradient=ctx.createRadialGradient(ball.x,ball.y,0,ball.x,ball.y,ball.radius);
        gradient.addColorStop(0.3,ball.innerColor);
        gradient.addColorStop(0.5,ball.middleColor);
        gradient.addColorStop(1.0,ball.outerColor);

        ctx.save();
        ctx.beginPath();
        ctx.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,false);
        ctx.fillStyle=gradient;
        ctx.strokeStyle=ball.strokeStyle;
        ctx.fill();
        ctx.stroke();
        ctx.restore();
    }
}

function animate(){
    if(!paused){

        update();
        draw();

        setTimeout( function(){
            window.requestAnimationFrame(animate); /// 让浏览器自行决定帧速率
        }, 0.10 * 1000 );// 延时执行
    }
}
//-->
</script>

2019年3月4日09点12分

[Canvas]更多的球的更多相关文章

  1. 简单的运动学，用canvas写弹力球

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 跟之前的随笔一样,因为本人仍是菜鸟一只,所以用到的技术比较简单,不适合大神观看...... 学canvas学了有一个多礼拜了,觉得canv ...

  2. THREE.js代码备份——canvas - geometry - earth(球体贴纹理)

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - g ...

  3. Android核心分析之二十八Android GDI之Surface&Canvas

    Surface&Canvas Canvas为在画布的意思.Android上层的作图几乎都通过Canvas实例来完成,其实Canvas更多是一种接口的包装.drawPaints ,drawPoi ...

  4. canvas动画气球

    canvas小球的动画我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实 ...

  5. 从0开发3D引擎（四）：搭建测试环境

    目录 上一篇博文 了解自动化测试 单元测试 集成测试 端对端测试 通过打印日志来调试 了解运行测试 断点调试 通过Spector.js测试WebGL 通过log调试Shader 移动端测试 了解性能测 ...

  6. 【转载】VC维的来龙去脉

    本文转载自 火光摇曳 原文链接:VC维的来龙去脉 目录: 说说历史 Hoeffding不等式 Connection to Learning 学习可行的两个核心条件 Effective Number o ...

  7. android图形基础知识

    Android核心分析(23)-----Andoird GDI之基本原理及其总体框架 2010-06-13 22:49 18223人阅读 评论(18) 收藏 举报 AndroidGDI基本框架 在An ...

  8. 机器学习之支持向量机（SVM）

    支持向量机 百度百科(基本看不懂):http://baike.baidu.com/link?url=Z4MU6AYlf5lOX7UGHVYg9tBvxBGOkriPtNt0DixmscnMz06q5f ...

  9. VC维的来龙去脉——转载

    VC维的来龙去脉——转载自“火光摇曳” 在研究VC维的过程中,发现一篇写的很不错的VC维的来龙去脉的文章,以此转载进行学习. 原文链接,有兴趣的可以参考原文进行研究学习 目录: 说说历史 Hoeffd ...

随机推荐

  1. MUI框架之输入框Input

    input输入框的官方api文档:http://dev.dcloud.net.cn/mui/ui/#input 一.输入框类型 输入框的类型是根据type来决定是普通输入框还是密码框,搜索框等类型 & ...

  2. chrome主页被hao123篡改，怎么改回来？

    这两天因为下载个别小程序又把我的chrome的主页给篡改了,由于我现在使用的是任务栏快捷方式,没法右键属性,但我想应该和桌面快捷方式是一个道理,于是我找到任务栏文件夹C:\Users\Administ ...

  3. （转）Java中的守护线程

    Java的守护线程与非守护线程   守护线程与非守护线程 最近在看多线程的Timer章节,发现运用到了守护线程,感觉Java的基础知识还是需要补充. Java分为两种线程:用户线程和守护线程 所谓守护 ...

  4. Windows/Linux下引用jar包，并用javac/java编译运行

    Windows/Linux下引用jar包,并用javac/java编译运行,有需要的朋友可以参考下. 1> Windows 假设要引用的jar放在D:/test目录下,名字为t1.jar, ja ...

  5. Work Management Service application in SharePoint 2016

    最近开始弄SharePoint 2016的Workflow,遇到问题发现没有了Work Management Service application,然后用PowerShell命令创建也不行,bing ...

  6. Mysql一个非常有用的内置函数今天碰到要把MySQL数据库中的varchar转换成date类型进

    Mysql一个非常有用的内置函数 今天碰到要把MySQL数据库中的varchar转换成date类型进行时间的比较和查询.在网上找了找,发现MySQL也跟其他数据库一样有自己内置的转换函数:str_to ...

  7. algid parse error, not a sequence错误

    主要使用由于没有对使用openssl生成的公私密钥对进行pkcs8编码,导致程序无法识别参考支付宝.项目用用到RSA加密用openssl生成了一个公私密钥对,在对加密字符串进行数字签名的时候,程序一直 ...

  8. 绝望的主妇第一二三季/Desperate Housewives迅雷下载

    绝望主妇 第一二三季 Desperate Housewives Season 1 2 3(2004 2005 2006) 本季看点:在紫藤街上住着这样一群主妇:拥有四个孩子和一个如孩子一般的丈夫的女强 ...

  9. LaTeX技巧207：使用align环境输入多行公式的技巧

    align是输入多行公式中最好用的环境,仅仅是个人浅见,因为他的对齐非常灵活,如果大家需要非常灵巧的对齐方式的多行公式,建议使用align环境,对应的也还有align*和aligned等等类似的环境, ...

  10. 使用模拟对象（Mock Object）技术进行测试驱动开发

    敏捷开发 敏捷软件开发又称敏捷开发,是一种从上世纪 90 年代开始引起开发人员注意的新型软件开发方法.和传统瀑布式开发方法对比,敏捷开发强调的是在几周或者几个月很短的时间周期,完成相对较小功能,并交付 ...