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() 方 ...
随机推荐
-
CentOS7 Mini安装Oracle后用PL/SQL连接数据库（图形化安装）
1.本来是安装完数据库后,本地可以访问了,而Win10下Oracle客户端配置Oracle Net Manager时报连接超时 解决方法: 这种连接超时,让我想到telnet连接问题,就用telnet ...
-
php header()函数设置页面Cache缓存
header()函数在php的使用很大,下面我来介绍利用它实现页面缓存的一些方法,但使用header前必须注意,在它之前不能任何输出,包括空格. 手册上,我们对于cache都是写着如何设置,以便让代码 ...
-
【UVa-514】铁轨——栈的学习
UVa514 Rails(铁轨) 题目:铁轨 题目链接: UVa514链接 题目描述: 某城市有一个火车站,有n节车厢从A方向驶入车站,按进站的顺序编号为1-n.你的任务是判断是否能让它们按照某种特定 ...
-
Linux解压缩总结
看文件名的后缀名,不同的后缀的文件解压和压缩的命令都不一样总结如下: *.tar 用 tar –xvf 解压 *.gz 用 gzip -d或者gunzip 解压 *.tar.gz和*.tgz 用 ta ...
-
WebService学习------小实例开发（号码归属地查询）
1.WebService简介: WebService是一种跨平台,跨语言的,可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的独立的通讯技术.通过SOAP在Web上提 ...
-
【BZOJ2809】【APIO2012】派遣
Background 在一个忍者的帮派里,一些忍者们被选中派遣给顾客,然后依据自己的工作获取报偿. Description 在这个帮派里,有一名忍者被称之为Master.除了Master以外,每名忍者 ...
-
（转）Spring Boot(十一)：Spring Boot 中 MongoDB 的使用
http://www.ityouknow.com/springboot/2017/05/08/spring-boot-mongodb.html MongoDB 是最早热门非关系数据库的之一,使用也比较 ...
-
记Git报错-refusing to merge unrelated histories
记Git报错-refusing to merge unrelated histories 系统:win7 git版本: 2.16.2.windows.1 问题 1.本地初始化了git仓库,放了一些 ...
-
判断一棵二叉树是否为AVL树
思路:AVL树是高度平衡的二叉搜索树,这里为了清晰说明,分别判断是否为搜索树,是否为平衡树. struct TreeNode { struct TreeNode *left; struct TreeN ...
-
gcc和vs在c的一些区别
1.switch中每个标签后面的命令在gcc中需要{}括起来以指明作用域. 2._itoa是非标准的c和c++扩展函数,在linux下可以使用sprintf(string, "%d &q ...