html5 canvas实现桌面效果,基于html5 canvas实现漫天飞雪效果实例
本文实例讲述了基于html5 canvas实现漫天飞雪效果的方法,运行该实例可以看到很棒的下雪效果。如下图所示:
主要代码如下:
复制代码代码如下:
ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">
漫天飞雪
* {margin: 0; padding: 0;}
body {
/*You can use any kind of background here.*/
background: #6b92b9;
}
canvas {
display: block;
}
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.fillStyle = "#FF0000";*/
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);
}
代码分析如下:
这行代码改变雪花半径大小:
复制代码代码如下:
r: Math.random()*3+1, //radius
这行代码改变雪花下落速度:
复制代码代码如下:
setInterval(draw, 15);
这行值改变雪花密度:
复制代码代码如下:
var mp = 3000; //max particles
相信本文所述对大家的html5 WEB程序设计有一定的借鉴价值。
html5 canvas实现桌面效果,基于html5 canvas实现漫天飞雪效果实例相关推荐
- html5 can,基于html5 can-vas实现漫天飞雪效果实例
本文实例讲述了基于html5 canvas实现漫天飞雪效果的方法,运行该实例可以看到很棒的下雪效果.如下图所示: 主要代码如下:代码如下:ttp://www.w3.org/TR/xhtml1/DTD/ ...
- html5游戏开发马赛克对比,基于HTML5 Canvas的纯JS图片马赛克效果插件
这是一款基于HTML5 canvas的图片马赛克js插件.该图片马赛克插件使用简单,可调整马赛克的大小,透明度等属性,适合用于制作一些特殊的图片效果. 基于HTML5 Canvas的纯JS图片马赛克效 ...
- html 图片墙效果,基于html5实现的图片墙效果
温馨提示:本信息由[金聪采编]搜集整理发布,版权归原作者及发布者所有,您如有异议请 举报 或者 版权申诉. 本文实例讲述了基于html5实现的图片墙效果,分享给大家供大家参考.具体实现方法如下: 这里 ...
- html如何添加时钟效果,基于HTML5+CSS3实现简单的时钟效果
目的: 利用html5,css实现钟摆效果 知识点: 1) 利用position/left/top和calc()实现元素的水平和垂直居中: 2) 利用CSS3的animation/transform/ ...
- html5桌面系统,基于HTML5的IVI桌面系统及本地功能扩展研究实现
摘要: 随着汽车技术以及互联网技术的发展,智能化车载信息娱乐系统(IVI:In-Vehicle Infotainment)已经成为汽车工业未来发展的新方向.目前,在用于开发智能化车载信息娱乐系统的大量 ...
- html5陀螺仪效果,基于HTML5陀螺仪实现移动动画效果
这次给大家带来基于HTML5陀螺仪实现移动动画效果,基于HTML5陀螺仪实现移动动画效果的注意事项有哪些,下面就是实战案例,一起来看一下. 最近用ofo小黄车App的时候,发现以前下方扫一扫变成了一个 ...
- html5 图片处理 开源,AlloyImage 基于 HTML5 的专业级图像处理开源引擎 - 文章教程...
AlloyImage(AI)是一个基于html5技术的JS图像处理库,集成了一些方便快捷的图像处理API,您可以将它引用到您的网页中,结合css3等技术,做出一些之前无法做到的优美效果,或者,提供一个 ...
- html5做一个展示页面,基于HTML5的WebGL实现json和echarts图表展现在同一个界面
突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开.我用HT实现了我的想法,代码一百多行,这么少的代码 ...
- html5研究背景及意义,基于HTML5的统计图表系统的研究与设计
摘要: 随着网络科技的发展,未来的网络方向越来越明了,软件产品越来越具有适应性的特点.可以这样说,硬件产品,网络产品和软件产品都在快速的变化以适应信息科技的发展.在这种背景下,人们越来越关注产品的价值 ...
- html5动画变形效果,碉堡了,基于HTML5 WebGL的图像扭曲变形动画开源特效
简要说明 这是一款基于HTML5 WebGL的图像扭曲变形动画特效.该特效中,通过Three.js来制作从一幅缩略图,扭曲变形为全屏大图的动画特效,共有6种炫酷的动画效果. 视频加载中... 该特效提 ...
最新文章
- JAVA目录树(全功能),Java+ajax实现
- android 移除自己view,Android自定义View-带删除和搜索图标的EditText
- 在Visual Studio 2010 里使用Nunit 进行Debug 测试
- 体验cas server
- 添加three20模板的方法
- html文档主体的根标签,2 HTML简介标签嵌套和并列关系文档声明
- IssueTrackerCSVS 代码笔记-数据层的反射工厂模式
- 通过读取配置文件,启动mongodb
- Atitit 提升水平 把代码写的有技术含量 目录 1. 提高可读性(重要)	2 1.1. 异常模式代替返回值	2 1.2. Dsl	2 1.3. 流畅接口方法链	2 1.4. 层次结构抽象	2 1
- 密码学40年|重要历史与人物
- 英特尔nuc能代替主机吗_拆了拆了!Intel NUC装机!小机箱退烧器啊!主机显示器合体...
- 常用串口监控软件:Accessport,ComMonitor,Device Monitoring Studio
- 知到计算机应用基础见面课答案,知到计算机应用基础(湖南环境生物职业技术学院)见面课答案...
- sklearn.metrics.multilabel_confusion_matrix
- 来自华为员工家属的“抱怨”
- SpringBoot和Vue验证码
- python自动拼图_Python图像处理——人物拼图游戏
- 听着熟悉的《东风破》,好想你~
- 【新人报道】新人报道,大家多多关照
- 从移动激光扫描数据中自动提取单棵树的双重生长方法
热门文章
- 批量将 txt 记事本文件按照固定行数拆分成单个独立的 txt 小文件
- 简谈:java种关于BigDecimal的坑
- SQL Server LEFT函数
- 万恶的less-loader
- mysql视图出问题如何解决_MySQL视图
- Oracle怎么清除视图数据,oracle如何删除视图?
- Android那些事!
- (深度学习快速入门)人工智能、机器学习和深度学习总体概述
- 大厂职级、薪资一览表,你处在哪一级?(BAT/TMD/华为)
- [BZOJ4340][BJOI2015]隐身术(后缀数组)