canvas实现雪花随机动态飘落效果

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

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

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

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<title>Document</title>

</head>

<style>

body{

margin: 0;

padding: 0;

}

canvas{

background: #000;

}

</style>

<body>

<canvas id = “snow”>

</canvas>

<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<len;i++){

var x = Math.random()*canvas.width;

var scale = Math.random()+0.5;

var rotate = Math.random()*60;

var speedX = Math.random()+1

var speedY = Math.random()+5;

var speedR = Math.random()*4+2;

// var snow = new Snow(x,0,scale,rotate,speedX,speedY,speedR);

// snow.render();

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

setTimeout(function(){

var snow = new Snow(x,0,scale,rotate,speedX,speedY,speedR);

snow.render();

snowArray.push(snow);

},Math.random()*8000);

})(x,0,scale,rotate,speedX,speedY,speedR);

}snowing();

}init();

// 动起来

function snowing(){

setInterval(function(){

//先清除

context.clearRect(0,0,canvas.width,canvas.height);

for(var i = 0;i < snowArray.length;i++){

snowArray[i].x = (snowArray[i].x+snowArray[i].speedX)%canvas.width;

snowArray[i].y = (snowArray[i].y+snowArray[i].speedY)%canvas.height;

snowArray[i].rotate = (snowArray[i].rotate+snowArray[i].speedR)%60;

snowArray[i].render();

}

},30);

}

 

/**

* sin60 = 对边/斜边 =>  对边 = sin60*斜边  =>  y=sin60*半径(r);

*/

</script>

</body>

</html>

动态效果图:

WordPress主题下载,WordPress免费主题下载,网站源码模板下载

以上就是canvas实现雪花随机动态飘落效果(代码示例)的详细内容,更多请关注网站的其它相关文章!


下载说明:
1. 本站所有资源来源于网络和用户上传,如有侵权请联系站长
2. 本站分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

本站的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有,如有侵权请留言联系:admin,转转请注明出处:http://zhanmr.com/5841.htm

发表评论

电子邮件地址不会被公开。 必填项已用*标注