观赏动态效果请点此下载并用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]碰撞球的更多相关文章
-
[Canvas]碰撞球 增加小球间碰撞检测
请点此下载代码并用Chrome或是Firefox打开index.html 图例: 代码: <!DOCTYPE html> <html lang="utf-8"&g ...
-
2017了,回家前 ";年末"; 分享:下雨,飘雪,红包雨,碰撞球,自定义View
(本博客为原创:http://www.cnblogs.com/linguanh/) 目录: 效果展示 感想 代码拆解 开源地址 效果展示 有没有兴趣继续看下去,直接看下"颜值"是第 ...
-
[Canvas]更多的球
欲观看动态效果请点此下载代码并用Chrome或者Firefox打开. 图例: 代码: <!DOCTYPE html> <html lang="utf-8"> ...
-
(canvas)两小球碰撞后的速度问题研究
这两天在研究canvas碰撞 先把小球开始运动的图拿出来 参考了一下别的的代码,在两个小球碰撞处理上,我觉得不完善 怎么样处理才算完善呢,当然是要用高中物理学的动量守恒了和机械能守恒了 机械能守恒我其 ...
-
知乎背景图 canvas 效果
思路分析: 1.创造一块画布, 2.在画布内随机产生一些小球,小球位置,半径,颜射,大小,速度等都可以随机产生, 3.定义画小球函数与小球移动函数, 4.将每一个小球圆心都与其它小球链接, 5判断每一 ...
-
高阶自定义View --- 粒子变幻、隧道散列、组合文字
高阶自定义View --- 粒子变幻.隧道散列.组合文字 作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:h ...
-
python写的屏保程序
__author__ = 'ChenYan' from random import randint from tkinter import * class Randball(): def __init ...
-
unity5.x中的关节和布料
关节 布料 关节 铰链关节(Hinge Joint):将两个物体以链条的形式绑在一起,当力量过大超过链条的固定力矩时,两个物体就会产生相互的拉力. 固定关节(Fixed Joint): ...
-
Python---TKinter项目实战---屏保
### 项目分析 - 屏保可以自己启动,也可以手动启动 - 一旦敲击键盘或者移动鼠标后,或者其他的引发时间,则停止 - 如果屏保是一幅画的话,则没有画框 - 图像的动作是随机的,具有随机性,可能包括颜 ...
随机推荐
-
expdp小记
一.10.2.0.5要求expdp导出a用户b表空间下的数据. expdp \'/ as sysdba\' directory=mydir dumpfile=1.dmp schemas=a exclu ...
-
!! Scrum之 流程和术语
!!Scrum之 流程和术语 http://www.cnblogs.com/zhoujg/archive/2009/07/15/1523680.html 以下将对一些术语进行简单介绍,以便大家现在开始 ...
-
2 WAN 和1 Evo/3g Routeros PCC 方法负载平衡
陕西中际现代包装科技:Routeros 2 WAN 和1 Evo/3g PCC 方法负载平衡 (Routeros多线负载平衡) 我们将要讨论2Wan和1个Evo/3G 的负载平衡.负载平衡就是在不同 ...
-
Bootstrap3.0学习14
Bootstrap3.0学习第十四轮(分页.徽章) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/340 ...
-
转:C++学习之Pair
Pair类型概述 pair是一种模板类型,其中包含两个数据值,两个数据的类型可以不同,基本的定义如下: pair<int, string> a; 表示a中有两个类型,第一个元素是int型的 ...
-
JAVA入门[9]-mybatis多表关联查询
概要 本节要实现的是多表关联查询的简单demo.场景是根据id查询某商品分类信息,并展示该分类下的商品列表. 一.Mysql测试数据 新建表Category(商品分类)和Product(商品),并插入 ...
-
An overview of network penetration testing
1. an SQLi vulnerability will allow you to do the following query the database using select statem ...
-
sql字符串根据日期产生日期+自增长标志
select Convert(varchar(6), '20180614 20:19:04', 12) + SubString('0000' + Convert(varchar(6), 1 + 1), ...
-
Paper | 深度网络中特征的可迁移性
目录 1. 核心贡献 2. 实验设置 2.1. 任务设置 2.2. 网络设置 3. 实验结果 4. 启发 论文:How transferable are features in deep neural ...
-
CRM/PLM/SCM/MES与ERP的联系与区别
企业通过专设信息机构.信息主管,配备适应现代企业管理运营要求的自动化.智能化.高技术硬件.软件.设备.设施,建立包括网络.数据库和各类信息管理系统在内的工作平台,提高企业经营管理效率的发展模式. 那么 ...