html5 canvas实现桌面效果,基于html5 canvas实现漫天飞雪效果的方法
基于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 canvas实现漫天飞雪效果的方法】相关文章:
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 注解机制
- 利用Bandwidth Splitter限制带宽
- 文巾解题1738. 找出第 K 大的异或坐标值
- Android-无线连接设备调试
- Hadoop 集群启动与停止
- 原生php登录注册,原生php登陆注册
- Sharepoint Ribbon Loaction
- python杨辉三角_yiduobo的每日leetcode 118.杨辉三角 amp;amp; 119.杨辉三角II
- iOS - Base64转图片图片转Base64
- android图片显示代码,Android图片处理:识别图像方向并显示(示例代码)
- python os详解
- uBLAS——Boost 线性代数基础程序库
- java实现五子棋_Java的五子棋实现
- 微博第三方+海外国际版+V2EX第三方
- Linux下串口编制【转】
- 在java程序中制作动图
- P3244 [HNOI2015]落忆枫音(DAG上的动态规划问题,朱刘定理,乘法逆元)
- 《崔庆才Python3网络爬虫开发实战教程》学习笔记(3):抓取猫眼电影榜单TOP100电影,并存入Excel表格
- 对于2020入学的计算机视觉研究生,研究生如何学才能毕业找到一份好工作?
- 浅谈对信息管理的认识