<!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. hibernate实现多变联合查询

    Hibernate主要支持两种查询方式:HQL查询和Criteria查询.前者应用较为广发,后者也只是调用封装好的接口. 现在有一个问题,就是实现多表连接查询,且查询结果集不与任何一个实体类对应,怎么 ...

  2. EXTjs+SpringMVC+Mybatis实现照片的上传，下载，查看关键技术整理

    第一个问题:如何通过Extjs4实现照片上传的布局展示以及本地照片选择后的在一个区域内进行图片预览 实现照片上传的布局展示: items : [ { xtype : 'box', itemId : ' ...

  3. Linux 查看tomcat占用的端口号

    第一步:先查看tomcat占用的进程号 ps -ef|grep tomcat 第二步:根据进程号,查看进程所占用的端口 netstat -apn 由此得知,tomcat的进程号是21845,并得到端口 ...

  4. oracle 11g r2 blob类型getString报错问题

    摘要: 问题: 在hibernate中实体类中blob类型字段为 private String textBlob; 查询时报错: java.sql.SQLException: 无效的列类型: getS ...

  5. 配置Nginx与tomcat负责均衡集群,

    今天主要说说,nginx如何配置tomcat集群,首先我们先介绍一下各个软件: 一: 1.Nginx介绍: 下载地址:http://nginx.org/en/download.html nginx这个 ...

  6. 嵌入式开发之工具---比开发手册更重要的一个命令 man page

    man http://bbs.chinaunix.net/thread-826490-1-1.html http://read.pudn.com/downloads70/ebook/254107/ch ...

  7. oracle中nvl()函数

    oracle中nvl()函数  oracle的nvl函数的使用方法 通过查询获得某个字段的合计值,假设这个值位null将给出一个预设的默认值  select nvl(sum(t.dwxhl),1) f ...

  8. ios NavigationViewController跳转以及返回传值

    (一)使用NavigationViewController进行页面跳转时,应该使用pushViewController方法来跳转至下一页面.这种话.下一页面相同在NavigationViewContr ...

  9. Android 中通过切割图片创建人物行走动画

    以前一直使用序列图片来实现动画效果,造成空间的极大浪费,所以想要尝试下切割图片来实现动画. 如图所示,是由66rpg纸娃娃系统生成的角色行走图.本程序必须实现将人物的整体图片切割后存入4x4的数组来动 ...

  10. Mysql主从复制，实现数据同步

    大型网站为了软解大量的并发访问,除了在网站实现分布式负载均衡,远远不够.到了数据业务层.数据访问层,如果还是传统的数据结构,或者只是单单靠一台服务器扛,如此多的数据库连接操作,数据库必然会崩溃,数据丢 ...