JS实现的少量运动的粒子运动效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
/*CSS源代码*/
body{
padding:0px;
background-color:#232a35;
font-family:"arial";
margin:0px;
overflow:hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
canvas{
background-color:#232a35;
padding:0px;
margin:0px;
border:0px solid black;
}
#interface{
left:20px;
top:20px;
width:250px;
position:absolute;
border:0px solid black;
padding:20px; box-sizing: border-box;
color:white;
}
input[type="range"] {
width:100%;
}
input[type=range] {
-webkit-appearance: none;
background-color: silver;
height:10px;
margin-top:15px;
margin-bottom:15px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #666;
width: 10px;
height: 26px;
}
input[type="button"] {
padding:5px;
margin-bottom:5px;
margin-top:5px;
width:100%;
}
input[type="input"] {
border:0px;
background-color:transparent;
width:20px;
}
h1{padding:0px;
margin-top:0px;
}
select {
padding:5px;
margin-bottom:5px;
margin-top:5px;
width:100%;
}a{
color:#94FFF5;
}
</style>
</head>
<body>
<!-- HTML代码片段中请勿添加<body>标签 //-->
<canvas id="canvas"></canvas>
<div id="interface">
<h1>www.gbtags.com</h1>
<p>
www.gbtags.com is a on line system. It can make you very <a href="http://codepen.io/hellomatt/pen/pJYxyX">"easy"</a> to use in learning coding for HTML5 and Javascript. .
</p>
</div>
<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<script>
/*Javascript代码片段*/
canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
W = canvas.width = window.innerWidth;
H = canvas.height = window.innerHeight;
generatorStock=[];
//
// Add the Generator Here :)
//
generator1 = new particleGenerator(0, H+2,W, 0,30);
function loadImage(url) {
var img = document.createElement("img");
img.src = url;
return img;
}
function drawTriangle(context, x, y, triangleWidth, triangleHeight, fillStyle){
context.save();
context.translate(0,-triangleHeight/2);
context.beginPath();<!--from www. j a v a 2s . c o m-->
context.moveTo(x, y);
context.lineTo(x + triangleWidth / 2, y + triangleHeight);
context.lineTo(x - triangleWidth / 2, y + triangleHeight);
context.restore();
context.closePath();
context.strokeStyle = fillStyle;
context.stroke();
}
function drawCircle(context, x, y, radius, fillStyle){
context.beginPath();
context.arc(x,y,radius,0,2*Math.PI);
context.closePath();
context.strokeStyle = fillStyle;
context.stroke();
}
function drawCross(context,fillStyle){
context.beginPath();
context.moveTo(0, 0);
context.lineTo(0, 10);
context.moveTo(-6, 5);
context.lineTo(6,5 );
context.closePath();
context.strokeStyle = fillStyle;
context.stroke();
}
var mouse = {x: 0, y: 0};
canvas.addEventListener('mousemove', function(e) {
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
}, false);
function randomIntgf(min, max) {
return Math.floor(min + Math.random() * (max - min + 1));
}
function randomInt(min, max) {
return min + Math.random() * (max - min);
}
function clamp(value, min, max) {
return Math.min(Math.max(value, Math.min(min, max)), Math.max(min, max));
}
function particle(x, y,type) {
this.radius = randomInt(.1, 3);
this.angleturn = randomInt(-.08, .08);
this.angle = randomInt(1,0);
this.type2 = randomIntgf(0,3);
this.x = x;
this.y = y;
this.vx =randomInt(-4, 4);
this.vy = randomInt(-2, 0);
this.type=type;
}
particle.prototype.update = function() {
this.x += this.vx;
this.y += this.vy;
this.vy += -0.08;
this.vx *= 0.99;
this.vy *= 0.99;
this.angle += this.angleturn;
this.radius -= .01;
context.beginPath();
context.font = "30px arial";
context.textAlign = "center";
// context.globalAlpha=1;
context.globalAlpha=this.radius;
context.lineWidth = 2;
context.lineCap = 'round';
context.save();
context.translate(this.x,this.y);
context.rotate(this.angle);
if(this.type2 === 0){
drawTriangle(context,0,0,15,13,"#FC63B3");
}else if(this.type2 === 1){
drawCircle(context,0,0,8,"#FFF48D");
}else if(this.type2 === 2){
context.beginPath();
context.rect(0,0,13,13);
context.closePath();
context.strokeStyle = "#94FFF5";
context.stroke();
}else if(this.type2 === 3){
drawCross(context,"#D68FFF");
}
context.restore();
context.globalAlpha=1;
if(this.y>H+5 ){
this.vy *= -.5;
}
if(this.x>W|| this.x < 0){
this.vx *= -1;
}
}
function particleGenerator(x, y, w, h, number,text) {
// particle will spawn in this aera
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.number = number;
this.particles = [];
this.text=text;
}
particleGenerator.prototype.animate = function() {
context.fillStyle="grey";
context.beginPath();
context.strokeRect(this.x, this.y, this.w, this.h);
context.font = "13px arial";
context.textAlign = "center";
context.closePath();
if (this.particles.length < this.number) {
this.particles.push(new particle(clamp(randomInt(this.x, this.w+this.x),this.x,this.w+this.x),
clamp(randomInt(this.y,this.h+this.y),this.y,this.h+this.y),this.text));
}
for (var i = 0; i < this.particles.length; i++) {
p = this.particles[i];
p.update();
if (p.radius < .01 || p.y <0) {
//a brand new particle replacing the dead one
this.particles[i] = new particle(clamp(randomInt(this.x, this.w+this.x),this.x,this.w+this.x),
clamp(randomInt(this.y,this.h+this.y),this.y,this.h+this.y),this.text);
}
}
}
update();
function update() {
// context.globalAlpha=.5;
context.clearRect(0,0,W,H);
generator1.animate();
requestAnimationFrame(update);
}
</script>
</body>
</html>
.
相关推荐
在实现星空粒子移动效果的场景下，Three.js可以用来创建一个包含无数小点的粒子系统，模拟出星空背景。每个粒子代表一颗星星，它们的移动可以通过JavaScript控制，并通过Three.js提供的渲染器渲染到网页中。 首先，...
在这个场景中，我们关注的是如何利用Canvas实现一个粒子背景效果，并且让这些粒子随着鼠标的移动而动态变化。这个效果常用于创建交互式的网页背景，提升用户体验。 首先，我们需要理解Canvas的基本用法。Canvas是一...
touchdesigner，人体运动、视频效果粒子碰撞效果
3. **虚幻效果**："虚幻"在这里可能是指通过粒子动画产生的视觉效果，比如波纹、扩散或流动感，这些效果通常通过粒子的运动轨迹和交互来实现。 4. **波纹动画**：波纹动画通常涉及到粒子的动态变化，如在表面上产生...
本节介绍， three.js （webgl） 中，使用 BufferGeometry ，添加位置和移动方向数据，结合 shader，简单实现类似 particle 的粒子运动效果，这里主要的逻辑在js脚本，而非 shader 中，所以这里算是 cpu 中，使用...
在这个“登录页面（canvas粒子）.zip”压缩包中，包含了一个利用HTML5的Canvas元素和JavaScript实现的登录页面模板，其中融入了独特的粒子特效，为用户界面增添了视觉吸引力。下面，我们将深入探讨这个模板中的关键...
javaScript实现基于Cesium，解析GFS数据实现的Windy粒子效果+源码+项目文档+demo，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ javaScript实现基于Cesium，解析...
JavaScript库如Three.js或Particle.js提供了方便的API来实现粒子效果。 3. **WebGL**：对于更复杂的粒子效果，可以使用WebGL，这是一种在浏览器中进行3D图形渲染的API。通过WebGL，粒子可以有更丰富的动画效果和更...
开发者可能通过调整粒子系统的参数，如粒子的数量、大小、颜色、速度、寿命以及它们的运动轨迹，来实现各种科幻效果。 在动画部分，Three.js的`requestAnimationFrame`函数被用来持续更新场景，每一帧都根据时间...
此外，粒子的运动轨迹可以通过自定义的顶点着色器实现，允许粒子按照预设路径或者随机方式运动。 5. **粒子材质(Material)**：THREE.PointsMaterial定义了粒子的外观。我们可以选择不同的颜色、透明度和大小，甚至...
这些粒子在特定规则下运动，比如随机漂移、重力吸引或者碰撞反弹，从而形成动态的视觉效果。这种效果常常被用于背景、标题或者按钮中，增加页面的吸引力和互动性。 实现这个效果的关键步骤包括： 1. **初始化...
JavaScript是实现这个特效的核心，它负责处理粒子的生成、运动和销毁等逻辑。首先，我们需要在网页加载完成后获取到Canvas元素，并设置其宽高与浏览器窗口一致。然后，创建一个用于存储粒子对象的数组，每个粒子都有...
在这个场景中，我们讨论的是一个利用Canvas和jQuery实现的彩色光粒子模拟粒子运动动画效果。这个动画效果展示了粒子如何进行无规则运动，从而创造出引人入胜的视觉效果。 首先，Canvas是一个基于矢量图形的API，它...
总的来说，"3d效果动态无限星空粒子宇宙图"是一个利用three.js和JavaScript实现的3D宇宙场景，通过粒子系统创造出动态的星空效果。它不仅展示了WebGL和three.js的强大功能，也为学习3D图形编程提供了很好的实践案例...
本篇文章将深入探讨如何利用three.js实现3D粒子动效，包括粒子爆炸效果，以及如何添加基础的鼠标交互。 一、粒子特效及其原理 粒子特效是一种常见的3D技术，用于模拟现实世界中的自然现象，如水、火、烟雾等。在...
在本项目中，"qt+opengl实现的烟花粒子爆炸效果"是一个利用Qt框架和OpenGL图形库创建的视觉效果程序。Qt是一个广泛使用的跨平台应用开发框架，支持多种操作系统，如Windows、Linux和macOS等。OpenGL则是一个用于渲染...
`js`目录是存放JavaScript代码的地方，通常会有一个或多个脚本文件，比如`particles.js`，用于实现粒子效果。这些脚本可能包含粒子的生成、运动轨迹、碰撞检测、颜色变化等核心逻辑。 `css`目录包含样式表文件，如`...
在计算机科学领域，尤其是计算机图形学中，"粒子运动 模拟烟花效果"是一个常见的课题，用于创建引人入胜的视觉体验。本项目通过编程实现了烟花绽放的动态效果，结合了艺术与技术的完美融合。以下是这个主题涵盖的...
在提供的压缩包文件"PF"中，很可能包含了实现粒子滤波运动目标跟踪的MATLAB代码。代码可能涉及创建粒子、预测运动、更新权重、重采样以及绘制跟踪结果等部分。通过深入学习和理解这些代码，我们可以进一步掌握粒子...
这个特定的项目专注于使用MATLAB来模拟带电粒子在非均匀电磁场中的运动轨迹，并且能够生成动态的动画效果，这对于理解物理现象和教育研究极具价值。 首先，带电粒子在电磁场中的运动是经典物理学中的一个基本概念。...