<!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. 在iOS中实现sticky header

    经常在网页中看到这样一种效果,当页面滚动一段距离后,页面中的某个部分固定在一个区域(通常是头部导航),这种效果一般称为Sticky Header,如下图所示: 上述操作在Android系统中非常好实现 ...

  2. centos6.5安装Apache+MySQL+PHP

    一.安装 MySQL 首先来进行 MySQL 的安装.打开超级终端,输入: [root@localhost ~]# yum install mysql mysql-server 安装完毕,让 MySQ ...

  3. man page及info page用法

    Linux系统的在线求助man page与info page 先来了解一下Linux有多少命令呢?在文本模式下,你可以直接按下两个[Tab]按键,看看总共有多少命令可以让你用? [vbird@www ...

  4. CentOS7 安装 Node.js

    1.首先安装node.js 的版本管理工具 NVM,执行以下命令: curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/ ...

  5. mysqldump默认参数add-drop-table

    mysqldump默认参数add-drop-table 原创 2014年01月28日 11:35:18 9214 接到一个同事电话,说UAT环境上的一张表被删了,要恢复一下.原来是新项目UAT,从测试 ...

  6. Tautology - poj 3295

      Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10437   Accepted: 3963 Description WF ...

  7. tornado+ansible+twisted+mongodb运维自己主动化系统开发(四)

    这周好忙,依据之前的写了个简陋的demo.放在腾讯的云主机上了,大家多交流哈 demo地址 http://203.195.193.251/

  8. KeyboardJS 开发指南 - 与 Three.js 配合使用的捕捉键盘组合键库

    KeyboardJS 开发指南 - 与 Three.js 配合使用的捕捉键盘组合键库 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非 ...

  9. 阿里云服务器---centos编译安装ffmpeg

    环境 系统环境:CentOS release 6.7 (Final) 需求 编译安装ffmpeg 获取依赖 安装依赖包 yum install -y autoconf automake cmake f ...

  10. 关于js语法中的一些难点(预解析，变量提前，作用域)

    ******标题很吓人************ 其实就是一个小小的例子 ,从例子中简单的分析一下作用域.预解析和变量提前的概念 <!DOCTYPE html> <html> & ...