html5 控制鼠标移动,HTML5 Canvas随鼠标移动的引力粒子群
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
'use strict';
// Initial Setup
var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
canvas.width = innerWidth;
canvas.height = innerHeight;
// Variables
var mouse = {
x: innerWidth / 2,
y: innerHeight / 2
};
var ballCount = 750;
var balls = [];
var gravityPos = [];
var friction = .995;
var explosionDistance = 2;
var shouldExplode = false;
var colors = ['#81C3D7', '#D9DCD6', '#3A7CA5', '#2F6690'];
var bgColor = '#16425B';
// Event Listeners
addEventListener("mousemove", function(event) {
mouse.x = event.clientX;
mouse.y = event.clientY;
gravityPos = [mouse.x, mouse.y];
});
addEventListener("mouseout", function(event) {
gravityPos = [canvas.width / 2, canvas.height / 2];
});
addEventListener("resize", function() {
canvas.width = innerWidth;
canvas.height = innerHeight;
init();
});
addEventListener("click", function() {
init();
});
// Utility Functions
function randomIntFromRange(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function randomeFloatFromRange(min, max) {
return Math.random() * (max - min) + min;
}
function randomColor(colors) {
return colors[Math.floor(Math.random() * colors.length)];
}
// Objects
function Ball(px, py, vx, vy, f, radius, color) {
this.p = [px, py];
this.v = [vx, vy];
this.gv = [0, 0];
this.gp = 0;
this.radius = radius;
this.color = color;
this.f = f;
this.update = function() {
// calculate gravity vector
this.gv = [gravityPos[0] - this.p[0], gravityPos[1] - this.p[1]];
// Calculate gravity intensity
var a = gravityPos[0] - this.p[0];
var b = gravityPos[1] - this.p[1];
this.gp = 1 / Math.sqrt(a * a + b * b);
// Explode if needed
if (shouldExplode) {
this.v[0] *= randomeFloatFromRange(-10, 10);;
this.v[1] *= randomeFloatFromRange(-10, 10);;
}
// Reduce ball's own velocity with friction
this.v[0] *= this.f;
this.v[1] *= this.f;
// Calculate new velocity, add gravity
this.v[0] += this.gv[0] * this.gp * this.f;
this.v[1] += this.gv[1] * this.gp * this.f;
// Move
this.p[0] += this.v[0];
this.p[1] += this.v[1];
this.draw();
};
this.draw = function() {
c.save();
c.beginPath();
c.arc(this.p[0], this.p[1], this.radius, 0, Math.PI * 2, false);
c.fillStyle = this.color;
c.fill();
c.closePath();
c.restore();
};
}
// Implementation
function init() {
gravityPos = [canvas.width / 2, canvas.height / 2];
balls = [];
for (var i = 0; i < ballCount; i++) {
var rd = randomeFloatFromRange(1, 7);
var px = randomeFloatFromRange(0, canvas.width / 3) + canvas.width / 3;
var py = randomeFloatFromRange(0, canvas.height / 3) + canvas.height / 3;
var vx = randomeFloatFromRange(-10, 10);
var vy = randomeFloatFromRange(-10, 10);
var f = friction;
balls.push(new Ball(px, py, vx, vy, f, rd, randomColor(colors)));
}
}
// Animation Loop
function animate() {
requestAnimationFrame(animate);
resetCanvas(bgColor);
updateShouldExplode();
for (var i = 0; i < balls.length; i++) {
balls[i].update();
}
}
init();
animate();
function resetCanvas(color) {
if (color) {
c.save();
c.fillStyle = color;
c.fillRect(0, 0, canvas.width, canvas.height);
c.restore();
} else {
c.clearRect(0, 0, canvas.width, canvas.height);
}
}
function updateShouldExplode() {
var x = 0;
var y = 0;
for (var i = 0; i < balls.length; i++) {
x += balls[i].v[0] < 0 ? balls[i].v[0] * -1 : balls[i].v[0];
y += balls[i].v[1] < 0 ? balls[i].v[1] * -1 : balls[i].v[1];
}
shouldExplode = x / balls.length < explosionDistance && y / balls.length < explosionDistance;
}
html5 控制鼠标移动,HTML5 Canvas随鼠标移动的引力粒子群相关推荐
- html 跟随鼠标移动线条,canvas跟随鼠标移动的随机线条
/** @type {HTMLCanvasElement} */ let canvas = document.querySelector('#canvas'); let cxt = canvas.ge ...
- html5控制字体样式,HTML5之CSS-网页文本美化-字体样式
做了挺长时间的程序员,逐渐的让我意识到,其实技术是给自己打开了一扇窗户,让自己更好的去了解这个世界. 今天,来了解文字在网页在中,是如何去设置的. 中间来一个小插曲,我想大家应该都用过办公软件,那么办 ...
- 利用HTML5的canvas进行鼠标写字
简介: 主要是使用HTML5中的canvas标签进行的,对画布的基本操作可以参考以下链接内容中的HTML5画布canvas: https://blog.csdn.net/qq_44174803/art ...
- HTML将canvas画布鼠标事件,HTML5 Canvas鼠标与键盘事件demo示例
演示html5 canvas鼠标事件,获取canvas对象上的鼠标坐标,演示键盘事件通过键盘控制canvas上对象移动. canvas对象支持所有的javascript的鼠标事件,包括鼠标点击(mou ...
- HTML5电子书翻页效果 代码特效+鼠标点击拖拽滑动翻页+点击书页内容放大+不支持中文
介绍 源码名称:[HTML5电子书翻页效果]代码特效+鼠标点击拖拽滑动翻页+点击书页内容放大+不支持中文 源码大小:237KB 开发语言:PHP+Mysql 操作系统:Windows,Linux 源码 ...
- html5 放大镜效果,JavaScript+HTML5 canvas实现放大镜效果完整示例
本文实例讲述了JavaScript+HTML5 canvas实现放大镜效果.分享给大家供大家参考,具体如下: 效果: www.jb51.net canvas放大镜 #copycanvas { bord ...
- html5 像素风画板,使用Canvas和JavaScript做一个画板
前些天学习了HTML5的元素,今天就来实践一下,用canvas做一个画板. 首先说一下要实现的功能:切换画笔颜色 调整笔刷粗细 清空画布 橡皮擦擦除 撤销操作 保存成图片 兼容移动端(支持触摸) 准备 ...
- HTML5 Canvas炫酷宇宙黑洞引力特效
black-hole.js是一款效果非常炫酷的模拟宇宙黑洞引力特效的 js插件.该插件基于 HTML5 canvas,使用WebGL. glfx.js和 numeric.js 共同制作完成.其效果是在 ...
- Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效
Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效 特效预览图 什么是贝塞尔曲线? 百度百科: 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图 ...
最新文章
- POJ2431贪心(最少加油次数)
- ABAP动态取得数据的方法
- 【Docker】 安装 nexus3
- 打造自己博客(wordpress)的wap手机版本
- 5页面title样式修改_认识html:实现网站页面是这么简单的一回事
- 系统分析师资料_如何成为一名数据分析师?
- 每人都有两大炸弹的扎金花2012
- Android蓝牙A2DP连接实现
- 【ASP.NET】ASP.NET如何发布Web项目
- 【POJ1723】SOLDIERS(中位数,货仓选址)
- 三维地图前端arcgis_基于ArcGIS的属性高程三维地图绘制
- nginx反向代理获取用户真实Ip地址
- 炸!撩下 OLAP 数据分析的黑马神器 ClickHouse
- python什么意思m_/usr/bin中的python3.6m 中的m是什么意思?和python3.6有什么区别?
- 解决QQ群文件未通过安全检测无法下载问题
- docker部署es和kibana遇到的坑
- GIS空间分析 数字地形分析4 明暗等高线的制作
- Docker容器 Dead 状态分析
- HDU-2094(产生冠军)
- 【midomi】Android下最强音乐搜索工具
热门文章
- 30分钟掌握 C#6
- 值得推荐的微软技术公众号推荐
- Django05-2:路由分发/命名空间/伪静态/虚拟环境/django版本区别
- Win11 的日历 替代
- Android Studio 引用aar包 更新后找不到新增的方法问题(踩坑)
- 空间数据库Spatial Tools的使用
- C#趣味程序----分数之和
- C和指针之判断参数在关键字字符串列表中是否匹配
- Android之网络编程之网络通信几种方式实例分享
- java语言中的浮点型数据分为,Java语言中的浮点型数据根据数据存储长度和数值精度的不同,进一步分为float型和double型,其中dou...