唯美雪景雪花飘落动态html,canvas实现雪花随机动态飘落效果

Document

body{

margin: 0;

padding: 0;

}

canvas{

background: #000;

}

var canvas = document.getElementById('snow');

var context = canvas.getContext('2d');

// 获得可视区的宽高

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

function snow(){

context.save();

// 开启路径

context.beginPath();

// 移动画布，确定雪花终点为中心点

context.translate(100,100);

//起点

context.moveTo(-20,0);

// 终点

context.lineTo(20,0);

// 线变成白色

context.strokeStyle = '#fff';

// 线变粗

context.lineWidth = 10;

// 线变圆头

context.lineCap = 'round';

context.stroke();

// 角度转弧度

var disX = Math.sin(30*Math.PI/180)*20;

var disY = Math.sin(60*Math.PI/180)*20;

// 画第二条线，左下到右上的线

context.moveTo(-disX,disY);

context.lineTo(disX,-disY);

// 画第三条线

context.moveTo(-disX,-disY);

context.lineTo(disX,disY);

context.stroke();

context.restore();

}

// snow();

//生成雪花的构造函数

function Snow(x,y,scale,rotate,speedX,speedY,speedR){

this.x = x;

this.y = y;

this.scale = scale;

this.rotate = rotate;

this.speedX = speedX;

this.speedY = speedY;

this.speedR = speedR;

// 渲染雪花

this.render = function(){

context.save();

context.beginPath();

context.translate(this.x,this.y);

context.scale(this.scale,this.scale);

context.rotate(this.rotate*Math.PI/180);

context.moveTo(-20,0);

context.lineTo(20,0);

context.strokeStyle = '#fff';

context.lineWidth = 10;

context.lineCap = 'round';

context.stroke();

var disX = Math.sin(30*Math.PI/180)*20;

var disY = Math.sin(60*Math.PI/180)*20;

context.moveTo(-disX,disY);

context.lineTo(disX,-disY);

context.moveTo(-disX,-disY);

context.lineTo(disX,disY);

context.stroke();

context.restore();

}

}