<!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. nodejs 学习资料大全

    1.blog学习篇 http://blog.fens.me/series-nodejs/ 从零开始nodejs系列文章

  2. Android Handler警告，SimpleDateFormat警告

    1:Handler// This Handler class should be static or leaks might occur: IncomingHandler    @SuppressLi ...

  3. html5小趣味知识点系列（一）autofocus

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Zxing二维码解析——图文转换

    一:文字转化为二维码图片. package com.xhm.tool; import java.util.Hashtable; import android.graphics.Bitmap; impo ...

  5. 圆环自带动画进度条ColorfulRingProgressView

    这是项目中遇到了,我也是借鉴大神的, 下载地址:https://github.com/oooohuhu/ColorfulRingProgressView 我把它导入了github中了,里面有详细的使用 ...

  6. spring；maven；github；ssm；分层；timestamp；mvn；

    [说明]本来还想今天可以基本搭建一个合适的ssm环境呢,结果发现,,太特么复杂了,网上的例子有好多,看了好多,下面的评论或多或少都有说自己运行产生问题的,搞的我也不敢好好下载运行 [说明]没办法,将目 ...

  7. EasyDSS流媒体服务器软件对数据库Sqlite3和MySQL的同时支持说明

    EasyDSS流媒体音视频直播与点播服务器软件,是一套提供一站式的转码.点播.直播.检索.回放.录像下载服务的高性能RTMP/HLS/HTTP-FLV流媒体服务,极大地简化了流媒体相关业务的开发和集成 ...

  8. EasyNVR无插件直播服务器软件使用详情功能 - 录像功能说明

    背景介绍 EasyNVR不仅仅拥有无插件的直播功能,更拥有对于直播录像的存储和日期检索功能: 本篇博文主要用于介绍EasyNVR的录像功能. 之前有博文介绍相关的录像功能,本篇主要为了介绍录像的新功能 ...

  9. 如何基于EasyDSS体系的全套SDK完成各种场景下的视频应用需求

    需求背景 回顾EasyDSS的发展过程,基本上保持的是先局部后系统.先组件后平台的发展方式,一步一步夯实每一个细节功能点,从最基础.最兼容的音视频数据的拉流获取,到高效的.全兼容的数据推流,再到流媒体 ...

  10. jQuery-AJAX-格式

    function loadInfo(){    var domainName=$("input[name='domain-name']").val(); //域名    var c ...