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

图例：

代码：

  1. <!DOCTYPE html>
  2. <html lang="utf-8">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4. <head>
  5.      <title>碰撞球 19.3.3 18:11 by:逆火 horn19782016@163.com</title>
  6.  
  7.      <style>
  8.      #canvas{
  9.         background:#ffffff;
  10.         cursor:pointer;
  11.         margin-left:10px;
  12.         margin-top:10px;
  13.         -webkit-box-shadow:3px 3px 6px rgba(0,0,0,0.5);
  14.         -moz-box-shadow:3px 3px 6px rgba(0,0,0,0.5);
  15.         box-shadow:3px 3px 6px rgba(0,0,0,0.5);
  16.      }
  17.  
  18.      #controls{
  19.         margin-top:10px;
  20.         margin-left:15px;
  21.      }
  22.      </style>
  23.  
  24.     </head>
  25.  
  26.      <body onload="init()">
  27.         <div id="controls">
  28.             <input id='animateBtn' type='button' value='运动'/>
  29.         </div>
  30.  
  31.         <canvas id="canvas" width="750px" height="500px" >
  32.             出现文字表示你的浏览器不支持HTML5
  33.         </canvas>
  34.      </body>
  35. </html>
  36. <script type="text/javascript">
  37. <!--
  38. var paused=true;
  39. animateBtn.onclick=function(e){
  40.     paused=! paused;
  41.  
  42.     if(paused){
  43.         animateBtn.value="运动";
  44.     }else{
  45.  
  46.         animateBtn.value="暂停";
  47.         window.requestAnimationFrame(animate);
  48.     }
  49. }
  50.  
  51. var ctx;// 绘图环境
  52. var balls;// 球数组
  53. function init(){
  54.  
  55.     var canvas=document.getElementById('canvas');
  56.     canvas.width=750;
  57.     canvas.height=500;
  58.     ctx=canvas.getContext('2d');
  59.  
  60.     balls=[
  61.         {
  62.             x:150,
  63.             y:250,
  64.             lastX:150,
  65.             lastY:250,
  66.             vx:-7.2,
  67.             vy:3.8,
  68.             radius:25,
  69.             innerColor:'rgba(255,25,0,1)',
  70.             middleColor:'rgba(255,25,0,0.7)',
  71.             outerColor:'rgba(255,25,0,0.5)',
  72.             strokeStyle:'gray',
  73.         },
  74.  
  75.         {
  76.             x:650,
  77.             y:50,
  78.             lastX:150,
  79.             lastY:250,
  80.             vx:-8.2,
  81.             vy:2.5,
  82.             radius:25,
  83.             innerColor:'rgba(113,232,227,1)',
  84.             middleColor:'rgba(113,232,227,0.7)',
  85.             outerColor:'rgba(113,232,227,0.5)',
  86.             strokeStyle:'red',
  87.         },
  88.  
  89.         {
  90.             x:50,
  91.             y:150,
  92.             lastX:150,
  93.             lastY:250,
  94.             vx:12,
  95.             vy:-14,
  96.             radius:25,
  97.             innerColor:'rgba(23,45,227,1)',
  98.             middleColor:'rgba(23,45,227,0.7)',
  99.             outerColor:'rgba(23,45,227,0.5)',
  100.             strokeStyle:'blue',
  101.         },
  102.    ];
  103.  
  104. };
  105.  
  106. function update(){
  107.     for(var i=0;i<balls.length;i++){
  108.         var ball=balls[i];
  109.  
  110.         if(ball.x+ball.vx+ball.radius>ctx.canvas.width || ball.x+ball.vx-ball.radius<0){
  111.             ball.vx=-ball.vx;
  112.         }
  113.  
  114.         if(ball.y+ball.vy+ball.radius>ctx.canvas.height || ball.y+ball.vy-ball.radius<0){
  115.             ball.vy=-ball.vy;
  116.         }
  117.  
  118.         ball.x+=ball.vx;
  119.         ball.y+=ball.vy;
  120.  
  121.     }
  122. }
  123.  
  124. function draw(){
  125.     ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
  126.  
  127.     for(var i=0;i<balls.length;i++){
  128.         var ball=balls[i];
  129.  
  130.         gradient=ctx.createRadialGradient(ball.x,ball.y,0,ball.x,ball.y,ball.radius);
  131.         gradient.addColorStop(0.3,ball.innerColor);
  132.         gradient.addColorStop(0.5,ball.middleColor);
  133.         gradient.addColorStop(1.0,ball.outerColor);
  134.  
  135.         ctx.save();
  136.         ctx.beginPath();
  137.         ctx.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,false);
  138.         ctx.fillStyle=gradient;
  139.         ctx.strokeStyle=ball.strokeStyle;
  140.         ctx.fill();
  141.         ctx.stroke();
  142.         ctx.restore();
  143.     }
  144. }
  145.  
  146. function animate(){
  147.     if(!paused){
  148.  
  149.         update();
  150.         draw();
  151.  
  152.         setTimeout( function(){
  153.             window.requestAnimationFrame(animate); /// 让浏览器自行决定帧速率
  154.         }, 0.10 * 1000 );// 延时执行
  155.     }
  156. }
  157. //-->
  158. </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. STM32F4 External interrupts

    STM32F4 External interrupts Each STM32F4 device has 23 external interrupt or event sources. They are ...

  2. [C# 基础知识系列]专题八: 深入理解泛型(二)

    引言: 本专题主要是承接上一个专题要继续介绍泛型的其他内容,这里就不多说了,就直接进入本专题的内容的. 一.类型推断 在我们写泛型代码的时候经常有大量的"<"和"& ...

  3. Revit MEP API找到连接器连接的连接器

    通过conn.AllRefs;可以找到与之连接的连接器. //连接器连接的连接器 [TransactionAttribute(Autodesk.Revit.Attributes.Transaction ...

  4. Android：intent的基础

    只有一个活动的应用也太简单了吧?没错,你的追求应该更高一点.不管你想创建多少 个活动,方法都和上一节中介绍的是一样的.唯一的问题在于,你在启动器中点击应用的图 标只会进入到该应用的主活动,那么怎样才能 ...

  5. 用 setMessage 方法灵活复用 UIAlertView

  6. Facebook工程师是如何改进他们Android客户端的

    from://http://greenrobot.me/devnews/facebook-engineer-improve-android-app/ Facebook工程师是如何改进他们Android ...

  7. WordPress主题开发：网站搜索

    调用方法一:手动输入html <form role="search" method="get" id="searchform" act ...

  8. JS --- 三目运算符

    1.什么是三目运算:(布尔表达式 ? 值0:值1;) 5>3?alert('5大'):alert('3大'); 即    if(5>3){alert('5大')}else{alert('3 ...

  9. 关于android studio 出现Error:Execution failed for task ':app:preDebugAndroidTestBuild'. 的解决办法

    Error:Execution failed for task ':app:preDebugAndroidTestBuild'. > Conflict with dependency 2018年 ...

  10. 《Redis设计与实现》

    <Redis设计与实现> 基本信息 作者: 黄健宏 丛书名: 数据库技术丛书 出版社:机械工业出版社 ISBN:9787111464747 上架时间:2014-6-3 出版日期:2014 ...