canvas怎么做特效(canvas实现下雪背景图)

canvas下雪背景 html css js

canvas怎么做特效(canvas实现下雪背景图)(1)

实现:

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*Math.random(), y: y*Math.random(), r: Math.random()*5, color:`rgba(255,255,255,${Math.random()})` }) }

Math.random()会返回0到1间的一个随机数。

5.绘制每片雪与雪花:

/* 创建image元素 */ var img = new Image(); /* 设置雪花的地址,只有雪花是用图片表示 */ img.src = "img/snow.png"; function draw(){ /* 遍历数组 */ for(let i=0;i<num;i ){ var yuan = arr[i]; /* 创建路径 */ ctx.beginPath(); /* 给雪设置颜色 */ ctx.fillStyle = yuan.color; /* 绘制雪 */ ctx.arc(yuan.x,yuan.y,yuan.r,0,2*3.14,false); /* 如果i0==0才绘制雪花,雪花不用太多 */ if(i0==0){ /* 绘制雪花图片 */ ctx.drawImage(img,yuan.x,yuan.y,yuan.r*10,yuan.r*10); } /* 填充路径 */ ctx.fill(); } }

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; /* 如果学已经走出窗口 */ if(yuan.y>y){ /* 重新给雪数组赋值 */ arr[i]={ x: x*Math.random(), y: -10, r: Math.random()*5, color:`rgba(255,255,255,${Math.random()})`} } } }

7.设置动画:

setInterval(function(){ /* 清屏 */ ctx.clearRect(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/52.jpg); 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*Math.random(), y: y*Math.random(), r: Math.random()*5, color:`rgba(255,255,255,${Math.random()})` }) } /* 创建image元素 */ var img = new Image(); /* 设置雪花的地址,只有雪花是用图片表示 */ img.src = "img/snow.png"; function draw(){ /* 遍历数组 */ for(let i=0;i<num;i ){ var yuan = arr[i]; /* 创建路径 */ ctx.beginPath(); /* 给雪设置颜色 */ ctx.fillStyle = yuan.color; /* 绘制雪 */ ctx.arc(yuan.x,yuan.y,yuan.r,0,2*3.14,false); /* 如果i0==0才绘制雪花,雪花不用太多 */ if(i0==0){ /* 绘制雪花图片 */ ctx.drawImage(img,yuan.x,yuan.y,yuan.r*10,yuan.r*10); } /* 填充路径 */ ctx.fill(); } } 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; /* 如果学已经走出窗口 */ if(yuan.y>y){ /* 重新给雪数组赋值 */ arr[i]={ x: x*Math.random(), y: -10, r: Math.random()*5, color:`rgba(255,255,255,${Math.random()})`} } } } setInterval(function(){ /* 清屏 */ ctx.clearRect(0,0,x,y); /* 绘制 */ draw(); /* 更新 */ updated(); },10) </script> </body> </html>

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页