html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>canvas 背景 1</title>
- <style type="text/CSS">
- *{margin: 0px;padding: 0px;font-family: "微软雅黑";outline: none;}
- html,body{height: 100%;overflow: hidden;}
- #cvs{position: fixed;z-index: -1;}
- </style>
- </head>
- <body>
- <canvas id="cvs"></canvas>
- <script type="text/javascript">
- var cvs = document.getElementById('cvs');
- cvs.width = window.innerWidth;
- cvs.height = window.innerHeight;
- var snowArr = [];
- var snow_r = parseInt(Math.random() * 4) + 6,
- snow_jiaoju = 8,
- snow_count = 6,// 雪花八条线
- snow_radians = (Math.PI / 180) * Math.round(360 / snow_count),
- snow_x = Math.random() * cvs.width,
- snow_y = Math.random() * cvs.height;// 圆周弧度
- var ctx = cvs.getContext('2d');
- ctx.fillStyle = 'deepskyblue';
- ctx.lineCap = 'round';
- ctx.lineWidth = 2;
- ctx.strokeStyle = '#FFFFFF';
- for(var l =0;l <80; l++){
- snowArr.push({
- mt_x : parseInt(Math.random() * cvs.width),
- mt_y : -parseInt(Math.random() * cvs.height),
- mt_speed : parseInt(Math.random() * 2 + 1)
- });
- }
- setInterval(function(){
- // if(snowArr.length < 80){
- // snowArr.push({
- // mt_x : parseInt(Math.random() * cvs.width),
- // mt_y : -parseInt(Math.random() * cvs.height),
- // mt_speed : parseInt(Math.random() * 2 + 1)
- // });
- // }
- ctx.clearRect(0,0,cvs.width,cvs.height);
- ctx.fillRect(0,0,cvs.width,cvs.height);
- for(var j = 0;j < snowArr.length;j ++){
- var mtx = snowArr[j].mt_x , mty = snowArr[j].mt_y;
- for(var i = 0;i < snow_count;i++){
- var lx = parseInt(mtx + snow_r * Math.sin(snow_radians * i)),
- ly = parseInt(mty + snow_r * Math.cos(snow_radians * i));
- ctx.beginPath();
- ctx.moveTo(mtx,mty);
- ctx.lineTo(lx,ly);
- ctx.stroke();
- for(var k = 0;k < snow_count;k ++){
- var x1 = mtx + (lx - mtx) * snow_jiaoju / snow_r,
- y1 = mty + (ly - mty) * snow_jiaoju / snow_r,
- x2 = parseInt(x1 + 3 * Math.sin(snow_radians * k)),
- y2 = parseInt(y1 + 3 * Math.cos(snow_radians * k));
- ctx.beginPath();
- ctx.moveTo(x1,y1);
- ctx.lineTo(x2,y2);
- ctx.stroke();
- }
- }
- snowArr[j].mt_y+= snowArr[j].mt_speed;
- snowArr[j].mt_speed = parseInt(Math.random() * 2 + 1);
- if(snowArr[j].mt_y> cvs.height + 10){
- //snowArr.splice(j , 1);
- snowArr[j].mt_y = -10;
- }
- }
- },20);
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/34581/98596ba08b98e2a83f4a95313778020b.html