<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>粒子模型动态背景</title>
<style>
*{margin: 0;padding:0;}
html,body{height:100%;width:100%;}
canvas{display: block;}
#myCanvas{background:#001022;}
#myButtons{bottom:20px;left:20px;position:absolute;}
#myButtons button{padding:15px;}
</style>
</head>
<body >
<canvas id="myCanvas" width="500" height="500"></canvas>
<div id="myButtons">
<button id="refreshBtn">刷新</button>
<button id="acceleBtn">加速</button>
<button id="startAnimation">Start</button>
<button id="stopAnimation">Stop</button>
</div>
</body>
</html>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*控制模块*/
$("#refreshBtn").click(function(event) {myGetAsteroid()});
$("#acceleBtn").click(function(event) {animate()});
var playAnimation = true;
var startButton = $('#startAnimation');
var stopButton = $('#stopAnimation');
startButton.hide();
startButton.click(function() {
$(this).hide();
stopButton.show();
playAnimation=true;
animate();
});
stopButton.click(function(){
$(this).hide();
startButton.show();
playAnimation=false;
});
var canvas=$('#myCanvas');
var context=canvas.get(0).getContext("2d");
var canvasWidth = canvas.width();
var canvasHeight= canvas.height();
/*更新画布大小*/
$(window).resize(resizeCanvas);
function resizeCanvas(){
canvas.attr("width",$(window).get(0).innerWidth);
canvas.attr("height",$(window).get(0).innerHeight);
canvasWidth=canvas.width();
canvasHeight=canvas.height();
}
resizeCanvas();
/*物体属性*/
var Asteroid = function(x,y,radius,iscolor,vx,vy,ax,ay){
this.x=x;
this.y=y;
this.radius=radius;//大小
this.iscolor=iscolor;//颜色
this.vx=vx;//x轴速度
this.vy=vy;//y轴速度
this.ax=ax;//x轴加速度
this.ay=ay;//y轴加速度
}
/*创建物体实体*/
var asteroids = new Array();
var getAsteroid = function() {
for (var i = 0; i < 100; i++) {
var x=20+(Math.random()*(canvasWidth-40));
var y=20+(Math.random()*(canvasHeight-40));
var radius=2+Math.random()*10;
var iscolor='rgba('+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+',0.54)';
var vx=Math.random()*4-2;
var vy=Math.random()*4-2;
var ax=Math.random()*0.2-0.1;
var ay=Math.random()*0.2-0.1;
asteroids.push(new Asteroid(x,y,radius,iscolor,vx,vy,ax,ay));
};
}
getAsteroid();
/*重构物体实体*/
var myGetAsteroid = function () {
for (var i = 0; i < asteroids.length; i++) {
asteroids[i].x=20+(Math.random()*(canvasWidth-40));
asteroids[i].y=20+(Math.random()*(canvasHeight-40));
asteroids[i].radius=2+Math.random()*10;
asteroids[i].iscolor='rgba('+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+',0.54)';
asteroids[i].vx=Math.random()*4-2;
asteroids[i].vy=Math.random()*4-2;
asteroids[i].ax=Math.random()*0.2-0.1;
asteroids[i].ay=Math.random()*0.2-0.1;
}
}
function animate(){
context.clearRect(0,0,canvasWidth,canvasHeight);
context.fillStyle = "rgb(255,255,255)";
var asteroidsLength = asteroids.length;
for (var i = 0; i < asteroidsLength; i++) {
var tmpAsteroid = asteroids[i];
/*设置边界，防止物体运行到画布之外*/
if(tmpAsteroid.x - tmpAsteroid.radius < 0){
tmpAsteroid.x = tmpAsteroid.radius;
tmpAsteroid.vx *=-1;
tmpAsteroid.ax *=-1;
}else if(tmpAsteroid.x + tmpAsteroid.radius > canvasWidth){
tmpAsteroid.x = canvasWidth - tmpAsteroid.radius;
tmpAsteroid.vx *=-1;
tmpAsteroid.ax *=-1;
}
if(tmpAsteroid.y - tmpAsteroid.radius < 0){
tmpAsteroid.y = tmpAsteroid.radius;
tmpAsteroid.vy *=-1;
tmpAsteroid.ay *=-1;
}else if(tmpAsteroid.y + tmpAsteroid.radius > canvasHeight){
tmpAsteroid.y = canvasHeight - tmpAsteroid.radius;
tmpAsteroid.vy *=-1;
tmpAsteroid.ay *=-1;
}
/*限制物体最大移动速度*/
if(Math.abs(tmpAsteroid.vx)<10){
tmpAsteroid.vx+=tmpAsteroid.ax
}
if(Math.abs(tmpAsteroid.vy)<10){
tmpAsteroid.vy+=tmpAsteroid.ay
}
/*摩擦力*/
if(Math.abs(tmpAsteroid.vx)>0.1){
tmpAsteroid.vx*=0.9;
}else{
tmpAsteroid.vx*=0.1;
}
if(Math.abs(tmpAsteroid.vy)>0.1){
tmpAsteroid.vy*=0.9;
}else{
tmpAsteroid.vy*=0.1;
}
// 更新物体之间连线
context.beginPath();
for (var j = asteroidsLength-1; j > 0; j--) {
var p2 = asteroids[j];
var a = tmpAsteroid.x - p2.x
var b = tmpAsteroid.y - p2.y
var dist = Math.sqrt((a * a) + (b * b)).toFixed(2);
if (dist < 100) {
context.moveTo(tmpAsteroid.x + tmpAsteroid.vx, tmpAsteroid.y + tmpAsteroid.vy);
context.lineTo(p2.x + p2.vx, p2.y + p2.vy);
}
}
context.stroke();
context.strokeStyle = 'rgba(204,204,204,0.5)';
context.closePath();
var tx = tmpAsteroid.x+=tmpAsteroid.vx;
var ty = tmpAsteroid.y+=tmpAsteroid.vy;
var tr = tmpAsteroid.radius;
/*更新画布物体*/
context.beginPath();
context.fillStyle = tmpAsteroid.iscolor;
context.arc(tx,ty,tr,0,Math.PI*2,false);
context.closePath();
context.fill();
}
if(playAnimation){
requestAnimationFrame(animate);
}
}
animate();
});
</script>
canvas粒子模型-动态背景.rar （1个子文件） 
bbb.html 7KB资源评论
虫虫教父
- 粉丝: 25
- 资源: 20
最新资源
- LCD12864.zip
- Intel845E主板图纸下载.zip
- 大众车系元件功能与检测资料下载.zip
- LPC2124 L297 L298 驱动电机proteus仿真.zip
- go-admin-golang资源
- DeepSeek 15天指导手册-从入门到精通(1).zip
- 光储一体化机构网型控制仿真模型：光伏与储能系统的协同优化及虚拟同步机控制策略,光储一体化机构的DC变换与虚拟同步机控制仿真模型研究,光储一体机构网型控制仿真模型 光伏和储能通过各自DC DC变器输出
- 纯电动汽车动力性能与经济性仿真分析：基于新势力造车快速迭代开发模型的研究与验证,纯电动汽车动力性与经济性能仿真计算：参数匹配与模型搭建的研究与应用价值分析-助力新势力造车快速迭代开发新车型,纯电动汽
- 锂枝晶溶解-沉积过程三维变形模型：电化学仿真与应力应变分析研究,锂金属电池锂枝晶沉积溶解过程的三维电化学变形模型仿真分析,锂金属电池锂枝晶溶解-沉积过程的三维变形模型 模型为电化学模型，仿真锂金属电
- bootstrap4-zhcn-documentation-春节主题资源
- 风光储氢微电网仿真研究：电解槽与燃料电池的互联与调频策略,基于风光储技术，实现燃料电池与电解槽的微电网仿真及优化研究-含并离网切换、一次与二次调频的综合策略探讨,风光储燃料电池电解槽微电网仿真（并离
- 基于自动紧急制动AEB策略的课程设计文档详解：传感器融合与车辆环境模型仿真分析,自动紧急制动系统（AEB）控制策略仿真建模：策略算法与车辆环境模型详解及其碰撞预警功能自动制动课程设计文档参考,自动紧急
- Jbase-javaEE框架项目资源
- 新能源汽车驱动未来：电机控制器程序核心技术解析,新能源汽车电机高效控制程序揭秘：驱动未来出行的核心科技,新能源汽车电机控制器程序 ,新能源汽车; 电机控制器; 程序,新能源汽车电机控制程序优化与升级研
- 台达PLC与威纶通触摸屏驱动的金属锯床：程序成熟稳定，注释详尽,台达PLC与威纶通触摸屏联控的金属锯床：程序成熟稳定，注释详尽,金属锯床采用台达PLC和威纶通触摸屏，带有注释 程序成熟稳定 ,核
- **水力压裂的数值模拟与固体力学理论分析：达西定理的实践应用**,COMSOL模拟水力压裂：结合固体力学与达西定理的深入探究,comsol模拟水力压裂，固体力学+达西定理 ,核心关键词：comso
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
