html页面下雪动画实例,HTML5实现下雪实例
下雪实例
知识点:
canvas画布
数组
绘画函数
效果:
源码:
------------------------------
html>
下雪
*{padding:0;margin:0}
html{overflow:hidden}
window.onload = function(){
//获取画布对象
var canvas = document.getElementById("canvas");
//获取画布的上下文
var context =canvas.getContext("2d");
//获取浏览器屏幕的宽度和高度
var w = window.innerWidth;
var h = window.innerHeight;
//设置canvas的宽度和高度
canvas.width = w;
canvas.height = h;
//1:如何产生雪花,一个圆 ,arc(x,y,r,start,end)
//初始化雪花数量
var num = 200;
//雪花数组
var snows = [];
for(var i=0;i
//x,y圆心掉的坐标位置,r代表圆的半径,d每个圆的每个圆之间的间距,c代表的颜色
var r = randColor();
snows.push({
x:Math.random()*w,
y:Math.random()*h,
r:Math.random()*10,
d:Math.random()*num
});
};
//绘画的函数
function draw(){
context.clearRect(0,0,w,h);
context.beginPath();
for(var i=0;i
var snow = snows[i];
context.fillStyle = "rgba(255,255,255,0.9)";
context.moveTo(snow.x,snow.y);
context.arc(snow.x,snow.y,snow.r,0,Math.PI*2);
}
context.fill();
//掉落
drop();
};
var angle = 0;
function drop()
{
angle += 0.01;
for(var i = 0; i
var p = snows[i];
//记住两个公式:Math.sin(弧度)返回是一个0 1 -1 的数字
//math.cos(1 0 -1 ) 自由体,
p.y += Math.cos(angle+p.d) + 1 + p.r*0.625;
p.x += Math.sin(angle) * 8 ;
//如果雪花到了边界,进行边界处理
if(p.x > w+5 || p.x h){
if(i%4 > 0) {
snows[i] = {x: Math.random()*w, y: -10, r: p.r, d: p.d};
}else{
//控制方向
if(Math.sin(angle) > 0){
snows[i] = {x: -5, y: Math.random()*h, r: p.r, d: p.d};
}else{
snows[i] = {x: w+5, y: Math.random()*h, r: p.r, d: p.d};
}
}
}
}
};
//执行和调用函数
draw();
setInterval(draw,10);
//随机颜色
function randColor(){
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb("+r+","+g+","+b+")";
};
};
html页面下雪动画实例,HTML5实现下雪实例相关推荐
- 借场雪吧~ js下雪动画 canvas画布实现下雪特效
这里我直接放在了app下面,因为我就下3秒.要一直下的建议换个位置哈. <div id="app"></div> <canvas id="c ...
- css3 和html5实例,HTML5和CSS3实例教程
领取成功 您已领取成功! 您可以进入Android/iOS/Kindle平台的多看阅读客户端,刷新个人中心的已购列表,即可下载图书,享受精品阅读时光啦! - | 回复不要太快哦~ 回复内容不能为空哦 ...
- iOS SnowAnimation(下雪动画)~demo
//联系人:石虎 QQ: 1224614774昵称:嗡嘛呢叭咪哄 /** 注意点: 1.看 GIF 效果图. 2.看连线视图的效果图. 3.看实现代码(直接复制实现效果) ...
- HTML5期末大作业:网上预订网站设计——火车票网上预订网站(4个页面) HTML+CSS+JavaScript web网页设计实例作业
HTML5期末大作业:网上预订网站设计--火车票网上预订网站(4个页面) HTML+CSS+JavaScript web网页设计实例作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. ...
- Android下雪动画 VS JS下雪动画
Android下雪动画的实现 自定义View package com.shanjing.snowflake;import android.content.Context; import android ...
- android下雪动画demo,Android的漂浮动画,下雪动画效果剖析.doc
Android的漂浮动画,下雪动画效果剖析 Android 的漂浮动画,下雪动画效果 先看下效果: 1.先得了解下canvas.drawBitmap(mBitmap, mSrcRect, mDestR ...
- 前端例程20221227:下雪动画
演示 动图太大了不好上传,这里就放个静态图吧,实际上这里是雪花从上到下飘落的效果. 代码 <!DOCTYPE html> <html lang="en">& ...
- 《HTML5与CSS3实例教程》
<HTML5与CSS3实例教程> 基本信息 作者: (美)Brian P. Hogan 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:97871153634 ...
- 七天免登录(Cookie+session)+ 页面显示动画人物效果(萌娘+气泡效果)+购物车的实现代码
一.七天免登录(Cookie+session),基于实现jsp页面 页面效果:勾选7天免登录复选框,输入用户名和密码,点击登录即可,登录后可在cookie中查看用户登录信息,以及用户过期时间 1.登录 ...
最新文章
- 软件性能测试关注点,盘点性能测试必须掌握的技术点
- 【记录】ubuntu18.04 终端下No module named numpy No module name cv2
- Linux——入门基本命令
- 前端学习(1854)vue之电商管理系统电商系统之安装mysql
- PDS+VL Motion对发动机曲轴系统不平衡载荷进行仿真分析
- 天津大学推出大型无人机航拍车辆数据集DroneVehicle
- 前端 学习笔记day47 其他标签
- CodeVs天梯钻石Diamond题解
- Layer弹窗回车执行确定按钮事件
- 每周荐书:JVM、Nginx、小程序(评论送书)
- Windows Server 2008 R2 下载地址
- 卷积和反卷积输出的计算公式
- BZOJ3772精神污染
- ORACLE AutoVue 服务器/桌面版/WebService/SDK安装
- python有趣小程序 表白-python表白小程序
- dedecms 栏目绑定二级域名
- 12-1 蓝色天空 : 创建一个背景为蓝色的Pygame窗口 12-2 游戏角色 : 找一幅你喜欢的游戏角色位图图像或将一幅图像转换为位图。 创建一个类, 将该角色绘制到屏幕中央, 并将该图像的背景色
- centos7.4安装指导书--基于华为服务器
- SpringBoot+MyBatis包含MyBatis Plus实现数据的增删改查(详细过程,适合新手小白)
- PHP Web项目总结