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() 方 ...
随机推荐
- [BZOJ2879] [Noi2012] 美食节 (费用流 & 动态加边)
Description CZ市为了欢迎全国各地的同学,特地举办了一场盛大的美食节.作为一个喜欢尝鲜的美食客,小M自然不愿意错过这场盛宴.他很快就尝遍了美食节所有的美食.然而,尝鲜的欲望是难以满足的.尽 ...
- maven工程 java 实现文件上传 SSM ajax异步请求上传
java ssm框架实现文件上传 实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传的文件 首先springmvc的配置文件要配置上传文件解析器: <!- ...
- 由html,body{height:100%}引发的对html和body的思考
html,body{height:100%} 今天看到一个CSS样式:html,body{height:100%},第一次看到,感觉挺奇怪,为什么html还需要设置height:100%呢,html不 ...
- 12.C++-构造函数与析构函数调用顺序,const成员函数,const对象
单个对象创建时,构造函数的调用顺序 1.首先判断该对象的类是否拥有父类,若有则先调用父类的构造函数 2.判断该对象的成员是否是其它类的成员,若是则调用成员变量的构造函数(调用顺序和声明顺序相同) 3. ...
- Chrome游览器使用时，修改文件和网页刷新后，不能显示效果
一:因为游览器缓存问题 有时候在写完代码后,刷新游览器,发现自己写的目标是让某一个东西隐藏,但是结果是依旧显示着,打开调试工具在Sources中发现,文件依旧是上次的旧的文件,新文件没有加载进去,无论 ...
- 图之单源Dijkstra算法、带负权值最短路径算法
1.图类基本组成 存储在邻接表中的基本项 /** * Represents an edge in the graph * */ class Edge implements Comparable< ...
- Angular4---起步----环境配置安装@angular/cli
学习angular,首先要搭建起angular的手脚架@angular/cli.首先需要NodeJS环境. 1.安装NodeJS 首先检查电脑是否安装了NodeJS环境,打开cmd命令行,运行node ...
- EasyUI Parser 解析器
Parser(解析器)应用场景 1,自动调用parser 只要我们书写相应的class,easyui就能成功的渲染页面,这是因为解析器在默认情况下,会在dom加载完成的时候($(docunment). ...
- 抓取Android应用的log
今天测试软件时,遇到一个bug,因为开发说那边不复现,所以为了更好追踪这个问题,需要抓取复现步骤地log. 在网上查了相关资料,同时结合自己遇到的问题,总结如下. 1. 抓取Android 应用log ...
- Java IO流简介
Java中的流是什么? java中的流是一个抽象的概念,在java的程序中需要把文件从一个设备传输到另一个设备上,这个设备可以是内存,程序,文件,网络.把在这些之间传输的叫做流.官方的解释:流是一组有 ...