<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" charset="utf-8" />
<title>漫天飞雪</title>
<style type="text/css">
* {margin: 0; padding: 0;}
body {background: #26568E;}
canvas {display: block;}
</style>
</head>
<body>
<div style=" background:#26568E; width:100%; height:2000px;" ></div>
<canvas id="canvas" style="position:fixed; top:0px;left:0px;z-index:80;pointer-events:none;"></canvas>
<script>
window.onload = function(){
//canvas init
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

//canvas dimensions
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;

//snowflake particles
var mp = 3000; //max particles
var particles = [];
for(var i = 0; i < mp; i++){
particles.push({
x: Math.random()*W, //x-coordinate
y: Math.random()*H, //y-coordinate
r: Math.random()*3+1, //radius
d: Math.random()*mp //density
})
}

//Lets draw the flakes
function draw(){
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
ctx.beginPath();
for(var i = 0; i < mp; i++){
var p = particles[i];
ctx.moveTo(p.x, p.y);
ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
}
ctx.fill();
update();
}

//Function to move the snowflakes
//angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes
var angle = 0;
function update(){
angle += 0.01;
for(var i = 0; i < mp; i++){
var p = particles[i];
//Updating X and Y coordinates
//We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
//Every particle has its own density which can be used to make the downward movement different for each flake
//Lets make it more random by adding in the radius
//
p.y += Math.cos(angle+p.d) + 1 + p.r/2;
p.x += Math.sin(angle) * 2;

//Sending flakes back from the top when it exits
//Lets make it a bit more organic and let flakes enter from the left and right also.
if(p.x > W || p.x < 0 || p.y > H){
if(i%3 > 0){ //66.67% of the flakes
particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};
}
else{
//If the flake is exitting from the right
if(Math.sin(angle) > 0){
//Enter fromth
particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};
}
else{
//Enter from the right
particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};
}
}
}
}
}

//animation loop
setInterval(draw, 15);
}
</script>
</body>
</html>

snowflake（canvas）的更多相关文章

  1. onDraw(canvas)和dispatchDraw（canvas）方法

    绘制VIew本身的内容,通过调用View.onDraw(canvas)函数实现 绘制自己的孩子通过dispatchDraw(canvas)实现 View组件的绘制会调用draw(Canvas canv ...

  2. 使用HTML5画布（canvas）生成阴影效果

    来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...

  3. 在线生成二叉树（基于EaselJS（canvas））

    学习二叉树的时候,老在本子上画二叉树好麻烦.其实就想看下树结构.最近html5蛮火的,就用canvas和EaselJS.js(开发flash公司开发的插件)插件实现了个.大家随便用吧. 这是个什么东西 ...

  4. （canvas）两小球碰撞后的速度问题研究

    这两天在研究canvas碰撞 先把小球开始运动的图拿出来 参考了一下别的的代码,在两个小球碰撞处理上,我觉得不完善 怎么样处理才算完善呢,当然是要用高中物理学的动量守恒了和机械能守恒了 机械能守恒我其 ...

  5. HTML5笔记学习（canvas）

    来源于<HTML5高级程序设计> css3圆角 border-radius旋转变换 transform:rotate(); 变换 transformation动画 animation过度 ...

  6. 上传图片时压缩图片 - 前端（canvas）做法

    HTML前端代码: <?php $this->layout('head'); ?> <?php $this->layout('sidebar'); ?> <m ...

  7. JS压缩图片（canvas），返回base64码

    上传图片时总会遇到图片过大上传不上去的问题,本方法是在网上搜的压缩图片的例子,我测试过了,确实能用,但是照搬别人的代码,发现压缩后图片会失真,不清晰,现经修改图片清晰度还可以,不仔细看差别不大,so, ...

  8. canvas动画——粒子系统（1）

    这个动画在很早之前就见过,当时就没迷住了.最近在学canavs动画,动手实现了一下.代码在这里.展示效果在这里. 这属于粒子系统的一种,粒子系统就是需要管理一堆粒子嘛,动画实现的关键在于,遍历这些粒子 ...

  9. 《JavaScript高级程序设计》笔记：使用Canvas绘图（15）

    基本用法 要使用<canvas>元素,必须先设置其width和height属性,指定可以绘图的区域大小.出现在开始和结束标签中的内容是后备信息,如果浏览器不支持<canvas> ...

随机推荐

  1. 篇章三:[AngularJS] 使用AngularCSS動態載入CSS

    前言 使用AngularAMD動態載入Controller 使用AngularAMD動態載入Service 上列兩篇文章裡,介紹了如何如何使用AngularAMD來動態載入Controller與Ser ...

  2. freemarker 开始时间与当前时间进行比较

    <#if startTime?datetime lt .now?datetime>:年月日时分秒比较 <#if startTime?date lt .now?date>:年月日 ...

  3. 安装wamp后 异常Exception Exception in module wampmanager.exe at 000F15A0

    系统环境:Windows 2008 R2 64bit 安装环境:wampserver2.4-x64 按照正常windows安装程序,完成WAMP Server程序安装,安装完成启动WAMP Serve ...

  4. hadoop常见算法（持续更新）

    1. 对以下数据进行排序,根据收入减去支出得到最后结余从大到小排序 账号 收入 支出 日期 zhangsan@163.com 6000 0 2014-02-20 lisi@163.com 2000 0 ...

  5. linux centos apache开启gzip的方法

    开启gzip压缩的方法很简单,连接服务器并打开配置文件“httpd.conf”,找到下面这两句,去掉前面的“#”  代码如下 1 LoadModule deflate_module modules/m ...

  6. Python修饰器的函数式编程（转）

    From:http://coolshell.cn/articles/11265.html 作者:陈皓 Python的修饰器的英文名叫Decorator,当你看到这个英文名的时候,你可能会把其跟Desi ...

  7. 【BZOJ4033】[HAOI2015]树上染色 树形DP

    [BZOJ4033][HAOI2015]树上染色 Description 有一棵点数为N的树,树边有边权.给你一个在0~N之内的正整数K,你要在这棵树中选择K个点,将其染成黑色,并将其他的N-K个点染 ...

  8. Eureka集群搭建

    服务注册.发现是微服务架构的关键原理之一,由于微服务架构是由一系列职责单一的细粒度服务构成的网状结构,服务之间通过轻量机制进行通信,这就必然引入一个服务注册发现的问题,也就是说服务提供方要注册报告服务 ...

  9. ubuntu 安装wine

    笔记 1.安装源 sudo add-apt-repository ppa:wine/wine-builds sudo apt-get update 2.安装wine sudo apt-get inst ...

  10. 9.接口BeanPostProcessor

    package org.springframework.beans.factory.config; import org.springframework.beans.BeansException; p ...