观赏动态效果请点此下载并用Chrome/Firefox打开index.html

图例：

代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>碰撞球 19.3.3 18:11 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);
    }
}

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

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

    balls=[
        {
            x:150,
            y:250,
            lastX:150,
            lastY:250,
            vx:-7.2,
            vy:3.8,
            radius:25,
            innerColor:'rgba(255,25,0,1)',
            middleColor:'rgba(255,25,0,0.7)',
            outerColor:'rgba(255,25,0,0.5)',
            strokeStyle:'gray',
        },

        {
            x:650,
            y:50,
            lastX:150,
            lastY:250,
            vx:-8.2,
            vy:2.5,
            radius:25,
            innerColor:'rgba(113,232,227,1)',
            middleColor:'rgba(113,232,227,0.7)',
            outerColor:'rgba(113,232,227,0.5)',
            strokeStyle:'red',
        },

        {
            x:50,
            y:150,
            lastX:150,
            lastY:250,
            vx:12,
            vy:-14,
            radius:25,
            innerColor:'rgba(23,45,227,1)',
            middleColor:'rgba(23,45,227,0.7)',
            outerColor:'rgba(23,45,227,0.5)',
            strokeStyle:'blue',
        },
   ];

};

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;
        }

        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月3日19点52分

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

  1. [Canvas]碰撞球 增加小球间碰撞检测

    请点此下载代码并用Chrome或是Firefox打开index.html 图例: 代码: <!DOCTYPE html> <html lang="utf-8"&g ...

  2. 2017了，回家前 "年末" 分享:下雨，飘雪，红包雨，碰撞球，自定义View

    (本博客为原创:http://www.cnblogs.com/linguanh/) 目录: 效果展示 感想 代码拆解 开源地址 效果展示 有没有兴趣继续看下去,直接看下"颜值"是第 ...

  3. [Canvas]更多的球

    欲观看动态效果请点此下载代码并用Chrome或者Firefox打开. 图例: 代码: <!DOCTYPE html> <html lang="utf-8"> ...

  4. （canvas）两小球碰撞后的速度问题研究

    这两天在研究canvas碰撞 先把小球开始运动的图拿出来 参考了一下别的的代码,在两个小球碰撞处理上,我觉得不完善 怎么样处理才算完善呢,当然是要用高中物理学的动量守恒了和机械能守恒了 机械能守恒我其 ...

  5. 知乎背景图 canvas 效果

    思路分析: 1.创造一块画布, 2.在画布内随机产生一些小球,小球位置,半径,颜射,大小,速度等都可以随机产生, 3.定义画小球函数与小球移动函数, 4.将每一个小球圆心都与其它小球链接, 5判断每一 ...

  6. 高阶自定义View --- 粒子变幻、隧道散列、组合文字

    高阶自定义View --- 粒子变幻.隧道散列.组合文字 作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:h ...

  7. python写的屏保程序

    __author__ = 'ChenYan' from random import randint from tkinter import * class Randball(): def __init ...

  8. unity5.x中的关节和布料

    关节 布料 关节 铰链关节(Hinge     Joint):将两个物体以链条的形式绑在一起,当力量过大超过链条的固定力矩时,两个物体就会产生相互的拉力. 固定关节(Fixed     Joint): ...

  9. Python---TKinter项目实战---屏保

    ### 项目分析 - 屏保可以自己启动,也可以手动启动 - 一旦敲击键盘或者移动鼠标后,或者其他的引发时间,则停止 - 如果屏保是一幅画的话,则没有画框 - 图像的动作是随机的,具有随机性,可能包括颜 ...

随机推荐

  1. STM32 USB FS Core and USB OTG Core

    STM32 USB-FS-Device development kit Compatible with the STM32F102xx and STM32F103xx series, STM32 L1 ...

  2. Revit API注册事件

    start using Autodesk.Revit.DB.Events; //http://revit.haotui.com [Autodesk.Revit.Attributes.Transacti ...

  3. 解决Illegal mix of collations (latin1_swedish_ci,IMPLICIT) and (utf8_general_ci,COER

    今天在用java与mysql数据库时发现Illegal mix of collations (latin1_swedish_ci,IMPLICIT) and (utf8_general_ci,COER ...

  4. 对一个前端使用AngularJS后端使用ASP.NET Web API项目的理解(4)

    chsakell分享了一个前端使用AngularJS,后端使用ASP.NET Web API的项目. 源码: https://github.com/chsakell/spa-webapi-angula ...

  5. Windows Phone本地数据库（SQLCE）：1、介绍（翻译）（转）

    一只大菜鸟,最近要学习windows phone数据库相关的知识,找到了一些比较简短的教程进行学习,由于是英文的,顺便给翻译了.本身英语水平就不好,估计文中有不少错误,如果有不幸读到的童鞋请保持对翻译 ...

  6. Objective-C市场占有率排名升至第4位

    TIOBE近日公布了2012年4月份的编程语言排行榜,终于不出小编所料,在上个月的编程语言排行榜中说过的“编程语言的王者之争不久很可能会发生改变”实现了,一方面是Java在上几个月中一直属于下滑状态, ...

  7. WebRTC 基于GCC的拥塞控制(上)

    转自:http://blog.csdn.net/doitsjz/article/details/56481981 实时流媒体应用的最大特点是实时性,而延迟是实时性的最大敌人.从媒体收发端来讲,媒体数据 ...

  8. Occlusion Culling遮挡剔除理解设置和地形优化应用

    这里使用的是unity5.5版本 具体解释网上都有,就不多说了,这里主要说明怎么使用,以及参数设置和实际注意点 在大场景地形的优化上,但也不是随便烘焙就能降低帧率的,必须结合实际情况来考虑,当然还有透 ...

  9. Java获取当前类名的两种方法

    适用于非静态方法:this.getClass().getName() 适用于静态方法:Thread.currentThread().getStackTrace()[1].getClassName() ...

  10. 低版本系统兼容的ActionBar（二）ActionProvider+分离式ActionBar+分离式的ActionMode

           这篇文章主要讲的是在低版本兼容的ActionBar中实现自定义的ActionProvider,ShareActionProvider的使用方法,如何实现分离式ActionBar,外加在分 ...