HTML5 canvas绘制雪花飘落
Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。
没有Canvas的年代，绘图只能借助Flash插件实现，页面不得不用JavaScript和Flash进行交互。有了Canvas，我们就再也不需要Flash了，直接使用JavaScript完成绘制。
我也是参考网上完成的看一下canvas绘制雪花飘落例图：
代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta chartset="UTF-8">
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
*{margin:0; padding:0;}
canvas{background:black;}
</style>
</head>
<body>
<canvas id="canvas">您的浏览器不支持canvas画布</canvas>
<script>
var can=document.getElementById('canvas');
var ctx=can.getContext('2d');
var wid=window.innerWidth;
var hei=window.innerHeight;
can.width=wid;
can.height=hei;
var snow=100; //雪花数量
var arr=[]; //保存雪花坐标，半径
for(var i=0; i<snow;i++){
arr.push({
x:Math.random()*wid,
y:Math.random()*hei,
r:Math.random()*7
})
}
function DrawSnow(){
ctx.clearRect(0, 0, wid, hei);
ctx.beginPath();
for(var i=0; i<snow;i++){
var p=arr[i];
ctx.moveTo(p.x,p.y)
ctx.arc(p.x,p.y,p.r,0,2*Math.PI,false)
ctx.fillStyle="white";
}
ctx.fill();
ctx.stroke();
SnowFall()
ctx.closePath();
}
//雪花飘落
function SnowFall(){
for(var i=0; i<snow; i++){
var p=arr[i];
p.y+=Math.random()*50+1;
if(p.y>hei){
p.y=0;
}
p.x+=Math.random()*50+1;
if(p.x>wid){
p.x=0;
}
}
}
setInterval(DrawSnow, 100);
</script>
</body>
</html>
HTML5 canvas绘制雪花飘落的更多相关文章
- HTML5 canvas绘制雪花飘落动画（需求分析、知识点、程序编写分布详解）
看到网上很多展示html5雪花飞动的效果,确实非常引人入胜,我相信大家也跟我一样看着心动的同时,也很好奇,想研究下代码如何实现:虽然哦很多地方也能下载这些源码,不过也不知道别人制作此类动画时的思路及难 ...
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- 使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
- 使用html5 canvas绘制图片
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- 使用html5 canvas绘制圆形或弧线
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- 解决html5 canvas 绘制字体、图片与图形模糊问题
html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...
- 使用html5 Canvas绘制线条(直线、折线等)
使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...
- html5 canvas绘制环形进度条，环形渐变色仪表图
html5 canvas绘制环形进度条,环形渐变色仪表图 在绘制圆环前,我们需要知道canvas arc() 方 ...
随机推荐
- 【BZOJ4195】【NOI2015】程序自动分析（并查集）
[BZOJ4195][NOI2015]程序自动分析(并查集) 题面 Description 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设 ...
- tp5 日志文件名称问题
原文:http://www.upwqy.com/details/17.html 我的项目在运行一段时间后 我发现在日志中生成了 1508467147-20.log 这种文件名的日志 开始还以为是bug ...
- python中的小知识点
这里是一些小知识点的汇集,为的是以后查找的方便. 行与缩进: 物理行:实际看到的代码行数. 逻辑行:在意义上的函数(即解释器执行的行数) 如果一个物理行中包含了多个逻辑行,则每个逻辑行之间需要用分号 ...
- 如何彻底关闭windows defender
我是一个喜欢裸奔的人,我不喜欢使用那些安全软件,什么360啊,什么毒霸啊让我深恶痛绝,就连windows自带的杀软我都不能忍啊,因为我平时喜欢找一下软件,很多的补丁和注册机,这些安全软件都会误报,所以 ...
- delphi简单的分页实现（高手可以不看）
适合初学者,练习几个控件的使用 1.先放一张界面控件布局: 4个button,2个label,1个edit,1个TRzsplitter(把界面分割成上下2部分),1一个adoquery,1个adoco ...
- Maven 手动添加selenium JAR 包到本地仓库
安装Maven后我们会在用户目录下发现.m2 文件夹.默认情况下,该文件夹下放置了Maven本地仓库.m2/repository. 在intellij中创建maven项目时,添加 selenium 依 ...
- input依次输入密码
原理: 一个真正的可以输入的input框,opacity: 0,设定位层级:(视图不可见的) 再来6(n)个input,readyonly,用来显示,type为password,设置好样式:(视图可见 ...
- tp框架的url模式
tp框架url地址可以由以下四种 http://网址/index.php?m=XX&c=XX&a=XX 基本get模式 http://网址/index.php/模块/控制器/操作方 ...
- SpringtMVC中配置 <mvc:annotation-driven/> 与 <mvc:default-servlet-handler/> 的作用与源码解析
基于 Spring4.X 来学习 SpringtMVC, 在学习过程中,被"告知"在 XML 配置文件中建议设置如下两项: 一直不明白为什么,但又甘心.于是,花了一点时间来调试源码 ...
- Javascripte的原型链之基础讲解
一.函数对象与普通对象 var o1 = {}; var o2 =new Object(); var o3 = new f1(); function f1(){}; var f2 = function ...