<!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. 【MIG专项测试组】如何准确评测Android应用的流畅度？

    转自 腾讯Bugly 叶方正,2008年加入腾讯,就职于无线研发部[专项测试组].曾经负责多个产品的性能优化工作,积累大量的移动终端平台优化以及评测经验. 怎样获取SM值? 前文我们分析了通过测量应用 ...

  2. HTML_<a>

    1.在a标签中调用js函数最适当的方法推荐使用: (1) a href="javascript:void(0);" onclick="js_method()" ...

  3. Android Studio中查看类的继承关系

    查看类的继承关系的快捷键F4.在Android Studio经常使用快捷键这篇文章中.有写了.今天主要是讲一些关于这个快捷键出来的界面的一些配置.这块功能相对偏冷一些,可能非常多人都会用不到.可是关于 ...

  4. PHP性能之语言性能优化：vld——查看代码opcode的神器

    vld介绍 vld是PECL(PHP 扩展和应用仓库)的一个PHP扩展,现在最新版本是 0.14.0(2016-12-18),它的作用是:显示转储PHP脚本(opcode)的内部表示(来自PECL的v ...

  5. shiro自定义logout filter

    虽然shiro有自己默认的logout过滤器,但是,有些时候,我们需要自己定义一下操作,比如说loutgout后,进入指定页面,或者logout后写入日志操作,这个时候,我们可以通过自定义logout ...

  6. 文本信息检索——布尔模型和TF-IDF模型

    文本信息检索--布尔模型和TF-IDF模型 1. 布尔模型 ​ 如要检索"布尔检索"或"概率检索"但不包括"向量检索"方面的文档,其相应的查 ...

  7. C语言基础知识【基本语法】

    C 基本语法1.C 的令牌(Tokens)C 程序由各种令牌组成,令牌可以是关键字.标识符.常量.字符串值,或者是一个符号.2.分号 ;在 C 程序中,分号是语句结束符.也就是说,每个语句必须以分号结 ...

  8. js父页面和子页面之间传值

    今天和朋友一块讨论,怎样通过js在父页面和子页面之间传值的问题,总结例如以下: 需求描写叙述:父页面有多个子页面.实如今父页面点击子页面,传值到子页面. 看着非常easy,试了好久.主要纠结在怎样获取 ...

  9. Unity框架入门

    介绍Unity框架之前,先要说几个概念DIP依赖倒置原则.IOC控制反转.DI依赖注入 DIP是设计原则之一,定义:上层不应该依赖于底层,两者都依赖于抽象: 抽象不依赖于细节,细节应该依赖于抽象. 像 ...

  10. u-boot下载模式LCD显示图片修改方法（基于TQ2440）

    1.明确液晶型号,这点非常重要,我手头的液晶是天嵌4.3寸屏,让人很郁闷的是液晶背面竟然写着LCD 3.5,这一点让我在上面浪费了好几个小时: 2.根据液晶型号,修改u-boot1.1.6--> ...