Canvas眼睛背景html CSS js
实施：
1.定义标签。
H1北极光之夜。
</h1> <div class="bg"></div> <canvas id="canvas"></canvas>h1是标题，.bg是背景图，canvas是画布。
2. 开始js部分，先获取画布：
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
3.定义常量与数组，看注释：
/* 定义x为窗口宽度，y为窗口高度 */
var x = 0 ,y=0;
/* 定义数组，是为了存储每一片雪的信息 */
var arr=[];
/* 假设有600片雪 */
var num=600;
4.初始化数组，给每片雪花定义随机位置坐标（x，y）与半径（r）与一个颜色（color）：
for(let i=0;i<num;i++){
arr.push({
x: x*Ma(),
y: y*Ma(),
r: Ma()*5,
color:`rgba(255,255,255,${Ma()})`
})
}
Ma（）会返回0到1间的一个随机数。
5.绘制每片雪与雪花：
/* 创建image元素 */
var img = new Image();
/* 设置雪花的地址，只有雪花是用图片表示 */
img.src = "img;;
function draw(){
/* 遍历数组 */
for(let i=0;i<num;i++){
var yuan = arr[i];
/* 创建路径 */
c();
/* 给雪设置颜色 */
c = yuan.color;
/* 绘制雪 */
c*3.14,false);
/* 如果i%30==0才绘制雪花，雪花不用太多 */
if(i%30==0){
/* 绘制雪花图片 */
c(img,yuan.x,yuan.y,yuan.r*10,yuan.r*10);
}
/* 填充路径 */
c();
}
}
6.更新雪的位置：
function updated() {
for(let i=0;i<num;i++){
var yuan = arr[i];
/* x轴位置+0.1，变化小点 */
yuan.x = yuan.x + 0.1;
/* y轴位置+自身半径一半，这样越大的学走越快 */
yuan.y = yuan.y+yuan.r/2;
/* 如果学已经走出窗口 */
i;y){
/* 重新给雪数组赋值 */
arr[i]={ x: x*Ma(),
y: -10,
r: Ma()*5,
color:`rgba(255,255,255,${Ma()})`}
}
}
}
7.设置动画：
setInterval(function(){
/* 清屏 */
c(0,0,x,y);
/* 绘制 */
draw();
/* 更新 */
updated();
},10)
8.完善，让x与y自适应窗口宽度，调用下面函数便可：
/* 绑定窗口大小发生改变事件，让canvas随时铺满浏览器可视区 */
window.onresize=resizeCanvas;
function resizeCanvas(){
x=canvas.width=window.innerWidth;
y=canvas.height=window.innerHeight;
}
resizeCanvas();
完整代码：
<!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>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
}
.bg{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(img);
background-size: cover;
z-index: -10;
}
h1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-42%,-50%);
font-family: 'fangsong';
font-size: 6em;
color: rgba(255, 255, 255, 0.5);
text-shadow: 0 0 10px rgb(255,255,255);
}
</style>
</head>
<body>
<h1>北极光之夜。</h1>
<div class="bg"></div>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
/* 定义x为窗口宽度，y为窗口高度 */
var x = 0 ,y=0;
/* 定义数组，是为了存储每一片雪与雪花的信息 */
var arr=[];
/* 假设有600片雪 */
var num=600;
/* 绑定窗口大小发生改变事件，让canvas随时铺满浏览器可视区 */
window.onresize=resizeCanvas;
function resizeCanvas(){
x=canvas.width=window.innerWidth;
y=canvas.height=window.innerHeight;
}
resizeCanvas();
for(let i=0;i<num;i++){
arr.push({
x: x*Ma(),
y: y*Ma(),
r: Ma()*5,
color:`rgba(255,255,255,${Ma()})`
})
}
/* 创建image元素 */
var img = new Image();
/* 设置雪花的地址，只有雪花是用图片表示 */
img.src = "img;;
function draw(){
/* 遍历数组 */
for(let i=0;i<num;i++){
var yuan = arr[i];
/* 创建路径 */
c();
/* 给雪设置颜色 */
c = yuan.color;
/* 绘制雪 */
c*3.14,false);
/* 如果i%30==0才绘制雪花，雪花不用太多 */
if(i%30==0){
/* 绘制雪花图片 */
c(img,yuan.x,yuan.y,yuan.r*10,yuan.r*10);
}
/* 填充路径 */
c();
}
}
function updated() {
for(let i=0;i<num;i++){
var yuan = arr[i];
/* x轴位置+0.1，变化小点 */
yuan.x = yuan.x + 0.1;
/* y轴位置+自身半径一半，这样越大的学走越快 */
yuan.y = yuan.y+yuan.r/2;
/* 如果学已经走出窗口 */
i;y){
/* 重新给雪数组赋值 */
arr[i]={ x: x*Ma(),
y: -10,
r: Ma()*5,
color:`rgba(255,255,255,${Ma()})`}
}
}
}
setInterval(function(){
/* 清屏 */
c(0,0,x,y);
/* 绘制 */
draw();
/* 更新 */
updated();
},10)
</script>
</body>
</html>
1.《关于100vh我想说canvas实现下雪背景图》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《关于100vh我想说canvas实现下雪背景图》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.lu-xu.com/guonei/2025744.html
