九、HTML5空间粒子背景动画特效

9.1 图片预览

9.2 index.html代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>HTML5空间粒子背景动画特效</title></head><body><script src='js/gameCanvas-3.0.js'></script><script src="js/index.js"></script></body>
</html>

9.3 index.js代码

var gc = new GameCanvas();var stars = [];
var circles = [];
var lineStars = [];
for (var i = 0; i < 1000; i++) {stars.push({x: Math.random() * width,y: Math.random() * height,radius: Math.random() * 2});
}for (var i = 0; i < 100; i++) {lineStars.push({x: Math.random() * width,y: Math.random() * height,lx: 0,ly: 0});
}for (var i = 0; i < 250; i++) {circles.push({x: Math.random() * width,y: Math.random() * height,radius: 300,color: "rgba(255, 0, 0, 0.01)"});circles.push({x: Math.random() * width,y: Math.random() * height,radius: 300,color: "rgba(0, 0, 255, 0.01)"});if (!(i % 3))circles.push({x: Math.random() * width,y: Math.random() * height,radius: 300,color: "rgba(200, 255, 0, 0.01)"});
}for (var i = 0; i < 100; i++) {circles.push({x: random_normal() / 6 * width + width / 2,y: random_normal() / 6 * height + height / 2,radius: 200,color: "rgba(255, 255, 255, 0.01)"});
}var canvas2 = document.createElement("canvas");
canvas2.width = width;
canvas2.height = height;
var ctx2 = canvas2.getContext("2d");
ctx2.fillStyle = "rgb(20, 20, 20)";
ctx2.fillRect(0, 0, canvas2.width, canvas2.height);
ctx2.globalCompositeOperation = "lighter";
for (var i = 0; i < circles.length; i++) {var c = circles[i];ctx2.beginPath();ctx2.arc(c.x, c.y, c.radius, 0, Math.PI * 2);ctx2.fillStyle = c.color;ctx2.fill();
}var img = new Image();
img.src = canvas2.toDataURL();function loop() {background("rgb(20, 20, 20)");gc.ctx.drawImage(img, 0, 0);for (var i = 0; i < stars.length; i++) {var s = stars[i];rect(s.x, s.y, s.radius * 1.5, s.radius * 1.5, "white");s.x += s.radius / 2;if (s.x > width) s.x = 0;if (s.x < 0) s.x = width;if (s.y > height) s.y = 0;if (s.y < 0) s.y = height;}for (var i = 0; i < lineStars.length; i++) {var s = lineStars[i];s.x += 25;line(s.x, s.y, s.lx, s.ly, "white", "white");if (s.x > width) s.x = 0;if (s.x < 0) s.x = width;if (s.y > height) s.y = 0;if (s.y < 0) s.y = height;s.lx = s.x;s.ly = s.y;}function random_normal() {var u = 0,v = 0;while (u === 0) u = Math.random(); //Converting [0,1) to (0,1)while (v === 0) v = Math.random();return Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);}

9.4 gameCanvas-3.0.js代码

链接：分享百度网盘的链接，点击即可下载
提取码：0258

九、HTML5空间粒子背景动画特效相关推荐

html5波浪效果,html5 canvas粒子波浪动画特效
特效描述:html5 canvas 粒子波浪动画特效.html5基于canvas绘制波涛汹涌的粒子波浪动画. 代码结构 1. HTML代码 'use strict'; var FastRandom = ...
html5悬浮圆圈背景动画特效,html5圆圈浮动背景动画特效
特效描述:html5 圆圈浮动背景动画特效.html5圆圈浮动背景动画特效代码结构 1. 引入JS 2. HTML代码 var container; var camera, scene, proj ...
html5悬浮圆圈背景动画特效,HTML5 canvas梦幻圆形泡泡动画背景特效
background.js是一款HTML5 canvas梦幻圆形泡泡动画背景特效.通过background.js插件,你可以轻松的制作出带渐变效果的气泡动画背景效果,并且背景颜色能在4种颜色间平滑过渡 ...
android 漩涡动画,html5 canvas酷炫的粒子漩涡动画特效
特效描述:html5 canvas 粒子漩涡动画特效.html5粒子漩涡动画,酷炫的粒子动画特效代码结构 1. HTML代码 function project3D(x,y,z,vars){ var ...
情人节程序员用HTML网页表白【彩色酷炫的空间背景动画特效】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
粒子背景php,html5+canvas圆形粒子移动背景动画特效
html5+canvas圆形粒子移动背景动画特效 this.update = function () { var lastPoint = { x: _this.x, y: _this.y }; // ...
HTML粒子碰撞烟花,html5 canvas漂亮的粒子烟花背景动画特效
特效描述:html5 canvas 漂亮的粒子烟花背景动画特效.html5 canvas漂亮的粒子烟花背景动画特效代码结构 1. HTML代码 class Vector2 { constructo ...
html5+css3满天星星音乐背景动画特效(超炫酷)
css3满天星星音乐背景动画特效 css3属性绘制唯美的满天星星和audio MP3音乐结合背景动画特效. 作品介绍 1.网页作品简介方面 :css3属性绘制唯美的满天星星和audio MP3音乐结合 ...
html画星空,html5 canvas绘制全屏的星空背景动画特效
特效描述:html5 canvas绘制全屏星空背景动画特效.html5 canvas背景动画,星空动画.连线区域跟随鼠标移动,外加碰壁检测代码结构 1. 引入JS 2. HTML代码 var m ...

九、HTML5空间粒子背景动画特效

文章目录

九、HTML5空间粒子背景动画特效

9.1 图片预览

9.2 index.html代码

9.3 index.js代码

9.4 gameCanvas-3.0.js代码

九、HTML5空间粒子背景动画特效相关推荐

最新文章

热门文章