欲观看动态效果请点此下载代码并用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. STM32F2x Is it possible to request multiple DMA streams with single request

    I want to setup an application, where a single trigger-factor (compare-match of a timer) shall reque ...

  2. Android:Attribute is missing the Android namespace prefix

    今天编写XML文件时,出现了Attribute is missing the Android namespace prefix的错误,开始一直找没找出原因,后来仔细一看原来只是一个很简单的单词书写错误 ...

  3. IIS7.5标识介绍

    应用程序池的标识是运行应用程序池的工作进程所使用的服务帐户名称.默认情况下,应用程序池以 Network Service 用户帐户运行,该帐户拥有低级别的用户权限.您可以将应用程序池配置为以 Wind ...

  4. iOS 32位、 64位系统兼容性设置－Xcode创建支持IOS4.3以上版本的应用的方法

    方法一: 如果是Xcode 5的话步骤为 点击项目名称->Build Settings->搜索 Architectures 这个里面的原始的值是Standard architectures ...

  5. ios 向sqlite数据库插入和读取图片数据

    向sqlite数据库插入和读取图片数据 (for ios) 假定数据库中存在表 test_table(name,image), 下面代码将图片文件test.png的二进制数据写到sqlite数据库: ...

  6. C#编程（四十九）----------队列

    队列 1.Queue定义 System.Collections.Queue类表示对象的先进先出集合,存储在Queue(队列)中的对象在一端插入,从另一端移除. 2.优点 (1).能对集合进行顺序处理( ...

  7. 美国罪案故事第一季/全集American Crime Story迅雷下载

    英文全名American Crime Story,第1季(2016)FX.本季看点:<美国罪案故事>以律师们的视角看待辛普森谋杀案. 本剧探索了案件背后各种混乱,以及案件双方的庭审策略,也 ...

  8. 危机边缘第五季/全集Fringe迅雷下载

    本季Fringe Season 5 第五季(2012)看点:Walter 用琥珀将Olivia.Peter.Astrid和自己封存,以便在2036年的未来世界实现自己抵抗观察者的完美计划,“解冻”后的 ...

  9. 开源项目PullToRefresh详解（四）——PullToRefreshListView和ViewPager的结合使用

    其实这个不是什么新东西了,在介绍(一)中我们就知道了PullToRefreshListView的用法,这里只要将其放入到ViewPager中就行啦.ViewPager还是和以往一样的定义和使用,在适配 ...

  10. PHP开发微信被动回复消息遇到的大坑

    最近开始做CMS后台与微信公众号的整合,在做被动回复消息时,按照官方文档的XML格式回复消息,总是提示"该公众号提供的服务出现故障,请稍后再试".但是通过微信提供的接口调试工具看我 ...