动态水木

<!DOCTYPE html>
<html lang=”zh”>

<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
<title>Document</title>
<style type=”text/css”>
#test {
position: absolute;
width: 120px;
height: 50px;
background-color: white;
color: black;
z-index: 10000;
}

body {
margin: 0px;
/*background: rgb(59, 73, 78);*/
width: 100vw;
height: 100vh;
background: linear-gradient(0deg, rgba(5, 16, 31, 1) 0%, rgba(35, 51, 67, 1) 100%);
}

body:before {
content: ”;
position: absolute;
display: block;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
/*background: linear-gradient(0deg, rgba(5, 16, 31, 1) 0%, rgba(35, 51, 67, 1) 100%);*/
}

#mainstage {
overflow: hidden;
position: absolute;
top: 0px;
left: 0px;
}

#opacityOverlay {
position: absolute;
display: block;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
z-index: 0;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.8785889355742297) 0%, rgba(0, 0, 0, 0.12592787114845936) 50%);
}

@keyframes starShine {
0% {
opacity: 0.5
}
25% {
opacity: 0.2
}
50% {
opacity: 0.8
}
75% {
opacity: 0.1
}
100% {
opacity: 0.5
}
}

.plancton {
box-sizing: border-box;
box-shadow: 0px 0px 20px 1px rgba(255, 255, 255, 0.7);
}
</style>
</head>

<body>
<div style=”display:none;” id=”test” onclick=”collisionBoom(1)”>
<div id=”mouseX”>0</div>
<div id=”mouseY”>0</div>
</div>
<canvas id=”mainstage”></canvas>
<div id=”opacityOverlay”></div>
</body>
<script type=”text/javascript”>
function siteOnload() {
var starArray = [];
var plancArray = [];
var selectedStar;
var canvas = document.getElementById(“mainstage”);
var context = canvas.getContext(“2d”);
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
var mouse = {
x: 0,
y: 0
}
initiateStars(canvas, starArray, plancArray);
var TO_RADIANS = Math.PI / 180;
var main = function() {
var now = Date.now();
var delta = now – then;
update();
render();
then = now;
requestAnimationFrame(main);
};

} else {

}
}
calculateStarMovement(starArray[k]);

}
}

function render() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.globalCompositeOperation = ‘lighter’; //test
//context.rect(0,0,150,150);
//context.stroke();
for(i = 0; i < starArray.length; i++) {
drawSingleStar(starArray[i], context);
}

}
main();
var then = Date.now();
}

if(target.tentacles[i].start > target.tentacles[i].max) {
target.tentacles[i].direction = target.tentacles[i].direction * -1;
} else if(target.tentacles[i].start < target.tentacles[i].max * -1) {
target.tentacles[i].direction = target.tentacles[i].direction * -1;
}
}
target.speed += target.direction;
if(target.speed > target.speedmax) {
target.direction = target.direction * -1;
target.speed = target.speedmax – 0.01;
} else if(target.speed <= 0.15) {
target.direction = target.direction * -1;
target.sped = 0.16;
}
}

function drawSingleStar(star, context) {
context.shadowBlur = 15;
context.shadowColor = “rgba(” + (star.color.red) + “,” + (star.color.green) + “,” + (star.color.blue) + “,” + 0.3 + “)”;
var grd = context.createRadialGradient(star.x, star.y, 1, star.x, star.y, 15);
grd.addColorStop(0, “rgba(255,255,225,1)”);
grd.addColorStop(1, “rgba(” + (star.color.red) + “,” + (star.color.green) + “,” + (star.color.blue) + “,” + 0 + “)”);
context.beginPath();
context.arc(star.x, star.y, 15, 0, 2 * Math.PI);
context.fillStyle = grd;
context.fill();

//Math.cos((angle – 90 * Math.PI/180) * length + x;
//Math.sin((angle – 90 * Math.PI/180) * length + y;
let top = {
x: Math.cos((star.angle + 90) * Math.PI / 180) * 15 + star.x,
y: Math.sin((star.angle + 90) * Math.PI / 180) * 15 + star.y,
};
let left = {
x: Math.cos((star.angle + (-50)) * Math.PI / 180) * (65 + (-star.speed * 7)) + top.x,
y: Math.sin((star.angle + (-50)) * Math.PI / 180) * (65 + (-star.speed * 7)) + top.y,
};
let right = {
x: Math.cos((star.angle + (230)) * Math.PI / 180) * (65 + (-star.speed * 7)) + top.x,
y: Math.sin((star.angle + (230)) * Math.PI / 180) * (65 + (-star.speed * 7)) + top.y,
};

let rightCtrl = {
x: Math.cos((star.angle + (180)) * Math.PI / 180) * 50 + top.x,
y: Math.sin((star.angle + (180)) * Math.PI / 180) * 50 + top.y,
};
let leftCtrl = {
x: Math.cos((star.angle + (0)) * Math.PI / 180) * 50 + top.x,
y: Math.sin((star.angle + (0)) * Math.PI / 180) * 50 + top.y,
};

context.shadowBlur = 30;
context.shadowColor = “rgba(” + (star.color.red) + “,” + (star.color.green) + “,” + (star.color.blue) + “,” + 1 + “)”;

context.beginPath();
context.lineJoin = “round”;
context.strokeStyle = “rgba(255,255,255,0.3)”;

function drawLine(point1, point2) {
context.moveTo(point1.x, point1.y);
context.lineTo(point2.x, point2.y);
}

function drawCurve(start, control, end) {
context.moveTo(start.x, start.y);
context.quadraticCurveTo(control.x, control.y, end.x, end.y);
}

let lineArray = [];
let lineNumber = 15;
for(n = 0; n < lineNumber; n++) {
let obj = {
x: right.x + (left.x – right.x) * (n / lineNumber),
y: right.y + (left.y – right.y) * (n / lineNumber),
};
lineArray.push(obj);
}

let ctrlArray = [];
for(n = 0; n < lineNumber; n++) {
let obj = {
x: rightCtrl.x + (leftCtrl.x – rightCtrl.x) * (n / lineNumber),
y: rightCtrl.y + (leftCtrl.y – rightCtrl.y) * (n / lineNumber),
};
ctrlArray.push(obj);
}

drawCurve(top, leftCtrl, left);
drawCurve(top, rightCtrl, right);
drawLine(right, left);
context.stroke();
context.fillStyle = grad;
context.closePath();

/* context.beginPath();
context.moveTo(star.x,star.y);
context.lineWidth = 5;
context.strokeStyle = “black”;
context.lineTo(Math.cos((star.angle + 90) * Math.PI/180) * 65 + star.x, Math.sin((star.angle + 90) * Math.PI/180) * 65 + star.y);
context.stroke();
*/
for(x = 0; x < star.tentacles.length; x++) {
context.beginPath();
context.moveTo(star.x, star.y);
let tentacleX = Math.cos((star.angle + star.tentacles[x].angle – (90 + star.tentacles[x].start * -0.5)) * Math.PI / 180) * star.tentacles[x].length + star.x;
let tentacleY = Math.sin((star.angle + star.tentacles[x].angle – (90 + star.tentacles[x].start * -0.5)) * Math.PI / 180) * star.tentacles[x].length + star.y;
let C1X = Math.cos((star.angle + star.tentacles[x].angle – (90 + star.tentacles[x].start * -0.5)) * Math.PI / 180) * star.tentacles[x].length / 3 * 1 + star.x;
let C1Y = Math.sin((star.angle + star.tentacles[x].angle – (90 + star.tentacles[x].start * -0.5)) * Math.PI / 180) * star.tentacles[x].length / 3 * 1 + star.y;
let C2X = Math.cos((star.angle + star.tentacles[x].angle – (90 + star.tentacles[x].start)) * Math.PI / 180) * star.tentacles[x].length / 3 * 2 + star.x;
let C2Y = Math.sin((star.angle + star.tentacles[x].angle – (90 + star.tentacles[x].start)) * Math.PI / 180) * star.tentacles[x].length / 3 * 2 + star.y;
context.bezierCurveTo(C2X, C2Y, C1X, C1Y, tentacleX, tentacleY);
var grad = context.createLinearGradient(star.x, star.y, tentacleX, tentacleY);
grad.addColorStop(0, “white”);
grad.addColorStop(1, “transparent”);
context.lineWidth = 1;
// set line color//
context.strokeStyle = grad //’white’;
context.stroke();
}
}

function getMouse(mouse) {
onmousemove = function(e) {
//e.clientX;
//e.clientY;
document.getElementById(“test”).innerHTML = “location:” + “<div style=’display:inline-block’ id=’mouseX’>” + e.clientX + “</div>,<div style=’display:inline-block’ id=’mouseY’>” + e.clientY + “</div>”;
}
}

tentz = Math.floor(Math.random() * 5) + 15;
for(n = 0; n < tentz; n++) {
maxandstart = Math.floor(Math.random() * 10) + 30;
tentacle = {
length: Math.floor(Math.random() * 50) + 150,
start: maxandstart,
max: maxandstart,
angle: Math.floor(Math.random() * 30) – 15,
direction: (Math.random() * 100) * -0.010,
} //
star.tentacles.push(tentacle);
}

return star;
}

function initiateStars(canvas, starArray, plancArray) {
let goblets = document.getElementById(“mainstage”).width / 100;
for(y = 0; y < goblets; y++) {
if(y === 0) {
starArray.push(createStar(fisk = true));

} else {
starArray.push(createStar());
}
};
let plancz;
for(k = 0; k < canvas.width / 10; k++) {
let obj = {
x: Math.floor(Math.random() * canvas.width),
y: Math.floor(Math.random() * canvas.height),
id: “planc” + k,
}
plancArray.push(obj)
plancz = document.createElement(‘div’);
plancz.id = “planc” + k;
plancz.style.position = “absolute”;
plancz.style.width = “1px”;
plancz.style.height = “1px”;
plancz.style.opacity = “0.6”;
plancz.style.borderRadius = “90px”
plancz.style.backgroundColor = “rgba(155,155,155,1)”;
plancz.style.left = obj.x + “px”;
plancz.style.top = obj.y + “px”;
plancz.style.zIndex = “10000”;
plancz.className = “plancton”
if(k < 0) {
plancz.style.animation = “starShine”;
plancz.style.animationIterationCount = “infinite”
plancz.style.animationTimingFunction = “linear”;
plancz.style.animationDuration = Math.floor(Math.random() * 5 + 5) + “s”;
}
document.getElementById(“opacityOverlay”).append(plancz)
}
}

siteOnload();

window.addEventListener(“resize”, function() {
var canvas = document.getElementById(“mainstage”);
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
}, true);

window.addEventListener(“click”, function(e) {
console.log(“clicked”, e);
}, true);
</script>

</html>

本文链接：https://www.cnblogs.com/1212dsa/p/11425997.html

动态水木

动态水木

动态水木的更多相关文章

随机推荐

热门专题

目录导航