我正在尝试添加从 CSS 技巧网站获得的降雪背景。雪看起来很酷，但出于某种原因，背景隐藏了我的 html 内容。请看下面的代码。 我怎样才能让这个很酷的背景保持原样，一个背景，这样它就不会占据整个页面 ？我只需要代码在后台运行，而 html 可以完成它的工作。 我很感激我能得到的任何帮助，而且我知道我的代码并不完美。另外，我只是在学习，我能得到的任何帮助都很棒。
HTML:
var c = document.getElementById('canv'),
$ = c.getContext("2d");
var w = c.width = window.innerWidth,
h = c.height = window.innerHeight;
Snowy();
function Snowy() {
var snow, arr = [];
var num = 600, tsc = 1, sp = 1;
var sc = 1.3, t = 0, mv = 20, min = 1;
for (var i = 0; i < num; ++i) {
snow = new Flake();
snow.y = Math.random() * (h + 50);
snow.x = Math.random() * w;
snow.t = Math.random() * (Math.PI * 2);
snow.sz = (100 / (10 + (Math.random() * 100))) * sc;
snow.sp = (Math.pow(snow.sz * .8, 2) * .15) * sp;
snow.sp = snow.sp < min ? min : snow.sp;
arr.push(snow);
}
go();
function go(){
window.requestAnimationFrame(go);
$.clearRect(0, 0, w, h);
$.fillStyle = 'hsla(242, 95%, 3%, 1)';
$.fillRect(0, 0, w, h);
$.fill();
for (var i = 0; i < arr.length; ++i) {
f = arr[i];
f.t += .05;
f.t = f.t >= Math.PI * 2 ? 0 : f.t;
f.y += f.sp;
f.x += Math.sin(f.t * tsc) * (f.sz * .3);
if (f.y > h + 50) f.y = -10 - Math.random() * mv;
if (f.x > w + mv) f.x = - mv;
if (f.x < - mv) f.x = w + mv;
f.draw();}
}
function Flake() {
this.draw = function() {
this.g = $.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.sz);
this.g.addColorStop(0, 'hsla(255,255%,255%,1)');
this.g.addColorStop(1, 'hsla(255,255%,255%,0)');
$.moveTo(this.x, this.y);
$.fillStyle = this.g;
$.beginPath();
$.arc(this.x, this.y, this.sz, 0, Math.PI * 2, true);
$.fill();}
}
}
window.addEventListener('resize', function(){
c.width = w = window.innerWidth;
c.height = h = window.innerHeight;
}, false); @import url(https://fonts.googleapis.com/css?
family=Molle:400italic&subset=latin,latin-ext);
body{
background-color: hsla(0,0%,0%,1);
margin: 0px;
overflow: hidden;
font-family: 'Molle', cursive;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Site</title>
</head>
<canvas id='canv'></canvas>
<body>
<div id="home">
<div id="wrapper">
<header>
<h1>My Site</h1>
<div class="snow"></div>
<nav class="nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#aboutus">About Us</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#social">Social</a></li>
</ul>
</nav>
</header>
</div>
</div>
</body>
</html>最佳答案
var c = document.getElementById('canv'),
$ = c.getContext("2d");
var w = c.width = window.innerWidth,
h = c.height = window.innerHeight;
Snowy();
function Snowy() {
var snow, arr = [];
var num = 600, tsc = 1, sp = 1;
var sc = 1.3, t = 0, mv = 20, min = 1;
for (var i = 0; i < num; ++i) {
snow = new Flake();
snow.y = Math.random() * (h + 50);
snow.x = Math.random() * w;
snow.t = Math.random() * (Math.PI * 2);
snow.sz = (100 / (10 + (Math.random() * 100))) * sc;
snow.sp = (Math.pow(snow.sz * .8, 2) * .15) * sp;
snow.sp = snow.sp < min ? min : snow.sp;
arr.push(snow);
}
go();
function go(){
window.requestAnimationFrame(go);
$.clearRect(0, 0, w, h);
$.fillStyle = 'hsla(242, 95%, 3%, 1)';
$.fillRect(0, 0, w, h);
$.fill();
for (var i = 0; i < arr.length; ++i) {
f = arr[i];
f.t += .05;
f.t = f.t >= Math.PI * 2 ? 0 : f.t;
f.y += f.sp;
f.x += Math.sin(f.t * tsc) * (f.sz * .3);
if (f.y > h + 50) f.y = -10 - Math.random() * mv;
if (f.x > w + mv) f.x = - mv;
if (f.x < - mv) f.x = w + mv;
f.draw();}
}
function Flake() {
this.draw = function() {
this.g = $.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.sz);
this.g.addColorStop(0, 'hsla(255,255%,255%,1)');
this.g.addColorStop(1, 'hsla(255,255%,255%,0)');
$.moveTo(this.x, this.y);
$.fillStyle = this.g;
$.beginPath();
$.arc(this.x, this.y, this.sz, 0, Math.PI * 2, true);
$.fill();}
}
}
window.addEventListener('resize', function(){
c.width = w = window.innerWidth;
c.height = h = window.innerHeight;
}, false);@import url(https://fonts.googleapis.com/css?
family=Molle:400italic&subset=latin,latin-ext);
body{
background-color: hsla(0,0%,0%,1);
margin: 0px;
overflow: hidden;
font-family: 'Molle', cursive;
z-index:10;
}
#canv{
position:absolute;
top:0;
z-index:-1;
}
h1{
color:white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Site</title>
</head>
<body>
<canvas id='canv'></canvas>
<div id="home">
<div id="wrapper">
<header>
<h1>My Site</h1>
<div class="snow"></div>
<nav class="nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#aboutus">About Us</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#social">Social</a></li>
</ul>
</nav>
</header>关于javascript - 尝试向页面添加雪花，但它完全清除了我的 HTML，并且没有任何显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48593988/