DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>111title>
<style>
body {
background-color: #000000;
margin: 0;
overflow: hidden;
}
html {
height: 100%;
overflow: hidden;
}
body {
height: 100%;
margin: 0;
}
#test {
background: #000000;
}
style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js">script>
head>
<body>
<canvas id="test">canvas>
<script>
const cvs = document.getElementById('test');
cvs.width = window.innerWidth;
cvs.height = window.innerHeight / 2.8;
const ctx = cvs.getContext('2d');
const colors = ['red', 'yellow'];
const text = 'cqf';
const text2 = '哈哈哈';
const [x, y] = [window.innerWidth / 2.5, window.innerHeight / 5];
const [a, b] = [window.innerWidth / 4, window.innerHeight / 3];
ctx.font = 'bold 80px arial';
function draw() {
ctx.save();
ctx.strokeStyle = colors[0];
ctx.lineWidth = 1;
ctx.setLineDash([8]);
ctx.strokeText(text, x, y);
ctx.strokeText(text2, a, b);
ctx.lineDashOffset = 8;
ctx.strokeStyle = colors[1];
ctx.shadowColor = 'orange';
for (let i = 25; i > 3; i -= 2) {
ctx.shadowBlur = i;
ctx.strokeText(text, x, y);
}
for (let i = 25; i > 3; i -= 2) {
ctx.shadowBlur = i;
ctx.strokeText(text2, a, b);
}
ctx.restore();
}
draw();
setInterval(function () {
ctx.clearRect(0, 0, cvs.width, cvs.height);
draw();
colors.reverse();
}, 500)
var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight,
mousePos = {
x: 50,
y: 300
},
canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
particles = [],
rockets = [],
MAX_PARTICLES = 400,
colorCode = 0;
$(document).ready(function () {
document.body.appendChild(canvas);
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
setInterval(launch, 600);
setInterval(loop, 1000 / 50);
});
$(document).mousemove(function (e) {
e.preventDefault();
mousePos = {
x: e.clientX,
y: e.clientY
};
});
$(document).mousedown(function (e) {
for (var i = 0; i < 5; i++) {
launchFrom(SCREEN_WIDTH);
}
});
function launch() {
launchFrom(650);
}
function launchFrom(x) {
if (rockets.length < 100) {
var rocket = new Rocket(x);
rocket.explosionColor = Math.floor(Math.random() * 360 / 10) * 10;
rocket.vel.y = Math.random() * -3 - 4;
rocket.vel.x = Math.random() * 8 - 3;
rocket.size = 8;
rocket.shrink = 0.999;
rocket.gravity = 0.0000001;
rockets.push(rocket);
}
}
function loop() {
if (SCREEN_WIDTH !== window.innerWidth) {
canvas.width = SCREEN_WIDTH = window.innerWidth;
}
if (SCREEN_HEIGHT !== window.innerHeight) {
canvas.height = SCREEN_HEIGHT = window.innerHeight;
}
context.fillStyle = "rgba(0, 0, 0, 0.05)";
context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
var existingRockets = [];
for (var i = 0; i < rockets.length; i++) {
rockets[i].update();
rockets[i].render(context);
var distance = Math.sqrt(Math.pow(mousePos.x - rockets[i].pos.x, 2) + Math.pow(mousePos.y - rockets[i].pos.y, 2));
var randomChance = rockets[i].pos.y < (SCREEN_HEIGHT * 2 / 3) ? (Math.random() * 100 <= 1) : false;
if (rockets[i].pos.y < SCREEN_HEIGHT / 5 || rockets[i].vel.y >= 0 || distance < 50 || randomChance) {
rockets[i].explode();
} else {
existingRockets.push(rockets[i]);
}
}
rockets = existingRockets;
var existingParticles = [];
for (var i = 0; i < particles.length; i++) {
particles[i].update();
if (particles[i].exists()) {
particles[i].render(context);
existingParticles.push(particles[i]);
}
}
particles = existingParticles;
while (particles.length > MAX_PARTICLES) {
particles.shift();
}
}
function Particle(pos) {
this.pos = {
x: pos ? pos.x : 0,
y: pos ? pos.y : 0
};
this.vel = {
x: 0,
y: 0
};
this.shrink = .97;
this.size = 2;
this.resistance = 1;
this.gravity = 0;
this.flick = false;
this.alpha = 1;
this.fade = 0;
this.color = 0;
}
Particle.prototype.update = function () {
this.vel.x *= this.resistance;
this.vel.y *= this.resistance;
this.vel.y += this.gravity;
this.pos.x += this.vel.x;
this.pos.y += this.vel.y;
this.size *= this.shrink;
this.alpha -= this.fade;
};
Particle.prototype.render = function (c) {
if (!this.exists()) {
return;
}
c.save();
c.globalCompositeOperation = 'lighter';
var x = this.pos.x,
y = this.pos.y,
r = this.size / 2;
var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
gradient.addColorStop(0.1, "rgba(255,255,255," + this.alpha + ")");
gradient.addColorStop(0.8, "hsla(" + this.color + ", 100%, 50%, " + this.alpha + ")");
gradient.addColorStop(1, "hsla(" + this.color + ", 100%, 50%, 0.1)");
c.fillStyle = gradient;
c.beginPath();
c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size : this.size, 0, Math.PI * 2, true);
c.closePath();
c.fill();
c.restore();
};
Particle.prototype.exists = function () {
return this.alpha >= 0.1 && this.size >= 1;
};
function Rocket(x) {
Particle.apply(this, [{
x: x,
y: SCREEN_HEIGHT
}]);
this.explosionColor = 0;
}
Rocket.prototype = new Particle();
Rocket.prototype.constructor = Rocket;
Rocket.prototype.explode = function () {
var count = Math.random() * 10 + 80;
for (var i = 0; i < count; i++) {
var particle = new Particle(this.pos);
var angle = Math.random() * Math.PI * 2;
var speed = Math.cos(Math.random() * Math.PI / 2) * 15;
particle.vel.x = Math.cos(angle) * speed;
particle.vel.y = Math.sin(angle) * speed;
particle.size = 10;
particle.gravity = 0.2;
particle.resistance = 0.92;
particle.shrink = Math.random() * 0.05 + 0.93;
particle.flick = true;
particle.color = this.explosionColor;
particles.push(particle);
}
};
Rocket.prototype.render = function (c) {
if (!this.exists()) {
return;
}
c.save();
c.globalCompositeOperation = 'lighter';
var x = this.pos.x,
y = this.pos.y,
r = this.size / 2;
var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
gradient.addColorStop(0.1, "rgba(255, 255, 255 ," + this.alpha + ")");
gradient.addColorStop(1, "rgba(0, 0, 0, " + this.alpha + ")");
c.fillStyle = gradient;
c.beginPath();
c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size / 2 + this.size / 2 : this.size, 0, Math.PI * 2, true);
c.closePath();
c.fill();
c.restore();
};
script>
body>
html>
