php漂浮雪花,canvas实现雪花随机动态飘落效果（代码示例）

本篇文章给大家介绍一下使用canvas实现雪花随机动态飘落效果的方法，文中示例代码介绍的非常详细。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

用canvas实现雪花随机动态飘落，代码如下Document

《script》

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();

}

}

// var snow = new Snow(50,50,1,10,10,10,10);

// snow.render();

// 存储所有生成的雪花

var snowArray = [];

// 生成雪花

function init(){

var len = 100;

for(var i = 0;i对边 = sin60*斜边 => y=sin60*半径(r)；

*/

《script》

动态效果图：

更多炫酷CSS3、HTML5、jQuery、Javascript特效，推荐访问：js特效网！