javascript html canvas

创造飘落的雪 HTML 5 和 JS

一世
http://winterba.sh/
Bash, 我真的很喜欢飘雪！我的问题是如何重新创建类似的效果，看起来很好。我试图重建代码，看看我是否可以理解他，但是，唉，不成功。 JS 我有脑袋。我有点谷歌迷，偶然发现了几个
http://seb.ly/demos/JSSnow/snow3d.html
, 但他们并不像网站那么优雅 SE, 或者看起来不是很好。

任何人都可以提供一些关于如何重现创建网站的说明 SE Winter Bash, 或者我可以找到如何做到的地方？

Edit:

我想重现尽可能接近的效果， IE: 用雪花落雪，能够移动鼠标并迫使雪移动或旋转鼠标。

已邀请:

2 个回复

帅驴

赞同来自:

一个优秀的问题，我真的在一段时间内写了一块雪插塞，我不断更新
http://loktar00.github.com/JQuery-Snowfall/
.
https://github.com/loktar00/JQ ... ll.js
我注意到你注意到了这个问题 html5 和 canvas, 但是，您可以在不使用它的情况下执行此操作，也可以简单地使用具有图像或不同颜色的背景的标准元素。

这是我刚刚收集的两个非常简单的事情。在我看来，关键是在落入薄片时使用罪来获得愉快的波浪效果。第一个使用该元素 canvas, 二常数 dom.

因为我绝对依赖 canvas, 这是版本 canvas, 在我看来，这很好地工作。

http://jsfiddle.net/loktar/UdyN6/
http://codepen.io/loktar00/full/CHpGo

/function// {

 var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||

 function/callback/ {

 window.setTimeout/callback, 1000 / 60/;

 };

 window.requestAnimationFrame = requestAnimationFrame;

}///;





var flakes = [],

 canvas = document.getElementById/"canvas"/,

 ctx = canvas.getContext/"2d"/,

 flakeCount = 200,

 mX = -100,

 mY = -100



 canvas.width = window.innerWidth;

canvas.height = window.innerHeight;



function snow// {

 ctx.clearRect/0, 0, canvas.width, canvas.height/;



 for /var i = 0; i < flakeCount; i++/ {

 var flake = flakes[i],

 x = mX,

 y = mY,

 minDist = 150,

 x2 = flake.x,

 y2 = flake.y;



 var dist = Math.sqrt//x2 - x/ * /x2 - x/ + /y2 - y/ * /y2 - y//,

 dx = x2 - x,

 dy = y2 - y;



 if /dist < minDist/ {

 var force = minDist / /dist * dist/,

 xcomp = /x - x2/ / dist,

 ycomp = /y - y2/ / dist,

 deltaV = force / 2;



 flake.velX -= deltaV * xcomp;

 flake.velY -= deltaV * ycomp;



 } else {

 flake.velX *= .98;

 if /flake.velY <= flake.speed/ {

 flake.velY = flake.speed

 }

 flake.velX += Math.cos/flake.step += .05/ * flake.stepSize;

 }



 ctx.fillStyle = "rgba/255,255,255," + flake.opacity + "/";

 flake.y += flake.velY;

 flake.x += flake.velX;



 if /flake.y >= canvas.height || flake.y <= 0/ {

 reset/flake/;

 }





 if /flake.x >= canvas.width || flake.x <= 0/ {

 reset/flake/;

 }



 ctx.beginPath//;

 ctx.arc/flake.x, flake.y, flake.size, 0, Math.PI * 2/;

 ctx.fill//;

 }

 requestAnimationFrame/snow/;

};



function reset/flake/ {

 flake.x = Math.floor/Math.random// * canvas.width/;

 flake.y = 0;

 flake.size = /Math.random// * 3/ + 2;

 flake.speed = /Math.random// * 1/ + 0.5;

 flake.velY = flake.speed;

 flake.velX = 0;

 flake.opacity = /Math.random// * 0.5/ + 0.3;

}



function init// {

 for /var i = 0; i < flakeCount; i++/ {

 var x = Math.floor/Math.random// * canvas.width/,

 y = Math.floor/Math.random// * canvas.height/,

 size = /Math.random// * 3/ + 2,

 speed = /Math.random// * 1/ + 0.5,

 opacity = /Math.random// * 0.5/ + 0.3;



 flakes.push/{

 speed: speed,

 velY: speed,

 velX: 0,

 x: x,

 y: y,

 size: size,

 stepSize: /Math.random/// / 30,

 step: 0,

 angle: 180,

 opacity: opacity

 }/;

 }



 snow//;

};



canvas.addEventListener/"mousemove", function/e/ {

 mX = e.clientX,

 mY = e.clientY

}/;



init//;

http://jsfiddle.net/loktar/guexx/

var flakes = [],

 bodyHeight = getDocHeight//,

 bodyWidth = document.body.offsetWidth;





function snow// {

 for /var i = 0; i < 50; i++/ {

 var flake = flakes[i];



 flake.y += flake.velY;



 if /flake.y > bodyHeight - /flake.size + 6// {

 flake.y = 0;

 }



 flake.el.style.top = flake.y + 'px';

 flake.el.style.left = ~~flake.x + 'px';



 flake.step += flake.stepSize;

 flake.velX = Math.cos/flake.step/;



 flake.x += flake.velX;



 if /flake.x > bodyWidth - 40 || flake.x < 30/ {

 flake.y = 0;

 }

 }

 setTimeout/snow, 10/;

};





function init// {

 var docFrag = document.createDocumentFragment//;

 for /var i = 0; i < 50; i++/ {

 var flake = document.createElement/"div"/,

 x = Math.floor/Math.random// * bodyWidth/,

 y = Math.floor/Math.random// * bodyHeight/,

 size = /Math.random// * 5/ + 2,

 speed = /Math.random// * 1/ + 0.5;



 flake.style.width = size + 'px';

 flake.style.height = size + 'px';

 flake.style.background = "#fff";



 flake.style.left = x + 'px';

 flake.style.top = y;

 flake.classList.add/"flake"/;



 flakes.push/{

 el: flake,

 speed: speed,

 velY: speed,

 velX: 0,

 x: x,

 y: y,

 size: 2,

 stepSize: /Math.random// * 5/ / 100,

 step: 0

 }/;

 docFrag.appendChild/flake/;

 }



 document.body.appendChild/docFrag/;

 snow//;

};



document.addEventListener/"mousemove", function/e/ {

 var x = e.clientX,

 y = e.clientY,

 minDist = 150;



 for /var i = 0; i < flakes.length; i++/ {

 var x2 = flakes[i].x,

 y2 = flakes[i].y;



 var dist = Math.sqrt//x2 - x/ * /x2 - x/ + /y2 - y/ * /y2 - y//;



 if /dist < minDist/ {

 rad = Math.atan2/y2, x2/, angle = rad / Math.PI * 180;



 flakes[i].velX = /x2 / dist/ * 0.2;

 flakes[i].velY = /y2 / dist/ * 0.2;



 flakes[i].x += flakes[i].velX;

 flakes[i].y += flakes[i].velY;

 } else {

 flakes[i].velY *= 0.9;

 flakes[i].velX

 if /flakes[i].velY <= flakes[i].speed/ {

 flakes[i].velY = flakes[i].speed;

 }

 }

 }

}/;



init//;



function getDocHeight// {

 return Math.max/

 Math.max/document.body.scrollHeight, document.documentElement.scrollHeight/, Math.max/document.body.offsetHeight, document.documentElement.offsetHeight/, Math.max/document.body.clientHeight, document.documentElement.clientHeight//;

}

奔跑吧少年

赞同来自:

飘落的雪很简单：创造 canvas, 创造一堆雪花，画出它们。

您可以创建一个类 snowflake 通过以下方式：

function Snowflake// {

 this.x = Math.random//*canvas.width;

 this.y = -16;

 this.speed = Math.random//*3+1;

 this.direction = Math.random//*360;

 this.maxSpeed = 4;

}

或类似的东西。然后，您有一个计时器，在每个步骤中调节每个雪花的方向少量，然后计算新的 X 和 Y, 考虑到速度和方向。

很难解释，但实际上很简单。

要回复问题请先登录或注册

创造飘落的雪 HTML 5 和 JS

2 个回复

发起人

相关问题

问题状态

创造飘落的雪 HTML 5 和 JS

与内容相关的链接

2 个回复

发起人

相关问题

问题状态