使用js实现雪花飘落的效果，用html5绘布加js写的雪花飘效果 。

代码：

<html>

<head>

<script>

/**

* js与html5实现的雪花飘落效果

* edit：www.jbxue.com

*/

function start(){

var array=new Array();

var canvas=document.getElementById("mycanvas");

var context=canvas.getContext("2d");

for(var i=0;i<50;i++){

var Showsnow=new showsnow();

array.push(Showsnow);

}

time=setInterval(function (){

context.clearRect(0,0,canvas.width,canvas.height);

for(var i=0;i<array.length;i++){

array[i].move();

array[i].draw(context);

}

},500);

}

function showsnow(){

var y=parseInt(Math.random()*50)*10;

var x=parseInt(Math.random()*80)*10;

this.draw=function(context){

context.font="50px Calibri";

context.fillText("*",x,y);

}

this.move=function(){

y+=20;

if(y>600){

y=0;

}

}

}

</script>

</head>

<body>

<input type="button" value="start" onclick="start()" />

<br/>

<canvas id="mycanvas" height="600px" width="600px" style="border: 3px solid blue"></canvas>

</body>

</html>

js实现雪花飘落效果的代码的更多相关文章

  1. 原生js实现雪花飘落效果

    雪花飘落的效果实现步骤:1.使用setInterval定时器每800毫秒创建一个雪花:2.把每一个雪花作为参数传进动态下落的方法中即可. <style> *{padding: 0;marg ...

  2. 简单说 JavaScript实现雪花飘落效果

    说明 这次实现的雪花飘落的效果很简单,主要是为了练习练习JavaScript中的定时器,setTimeout 和 setInterval. 效果图 解释setTimeout() setTimeout函 ...

  3. 【OpenGL】Shader实例分析（七）- 雪花飘落效果

    转发请保持地址:http://blog.csdn.net/stalendp/article/details/40624603 研究了一个雪花飘落效果.感觉挺不错的.分享给大家,效果例如以下: 代码例如 ...

  4. js之雪花飘落

    有很多网站都有雪花或花瓣飘落的特效,看上去很好看.我来用js实现这个效果. 在写代码之前可以先引入bass.css对样式做下处理: 1.html部分 先建一个文件夹,在body中插入如下代码 < ...

  5. AJ学IOS（33）UI之Quartz2D雪花飘落效果刷帧

    AJ分享,必须精品 效果: 可以加入随机数实现真的飘落效果哦. 代码: -(id)initWithCoder:(NSCoder *)aDecoder { //请注意这里一定要先初始化父类的构造方法 i ...

  6. js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...

  7. js上下滚屏效果，代码通过测试

    这是html代码 <div class="box"> <div class="bcon"> <h1><b>领号实 ...

  8. 个人网站html5雪花飘落代码JS特效下载

    如何给自己的网站/页面添加雪花代码.特效呢?有的网站配合自己的主题模板添加雪花飘落效果挺好看的.特别是与冬天季节相关的主题,很多的博客空间都加了雪花的效果.在网上搜索了几种雪花效果,做了简单的修改,在 ...

  9. HTML5 canvas绘制雪花飘落

    Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等. 没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和F ...

随机推荐

  1. 编译器失败，错误代码为xxx

    问题:出现编译器失败,等一会儿出现csc.exe无响应,错误代码不一定是255,是其他的也可以试试 解决办法: 查看是否类似360之类的杀毒软件运行着,如果运行着,关掉然后重新试一下,应该就没有问题了 ...

  2. 1.5.7 CharFilterFactories

    CharFilterFactories 字符过滤器是一个预处理输入字符的组件,字符过滤器可以链接如token过滤器,并放置在Tokenizer(分词器)的前面,字符过滤器可以添加,更改或删除字符,同时 ...

  3. 1.5.6 Filters

    Filters 过滤器filter应该跟在tokenizer或者另一个filter之后.因为它们将TokenStream作为输入源. <fieldType name="text&quo ...

  4. uva 10054 The Necklace 拼项链 欧拉回路基础应用

    昨天做了道水题,今天这题是比较水的应用. 给出n个项链的珠子,珠子的两端有两种颜色,项链上相邻的珠子要颜色匹配,判断能不能拼凑成一天项链. 是挺水的,但是一开始我把整个项链看成一个点,然后用dfs去找 ...

  5. sql语句大全~·留着有用

    一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建 备 ...

  6. Unhandled Error in Silverlight Application “Syncfusion.Silverlight.Olap.Gauge.OlapGauge”的类型初始值设定项引发异常

    Silverlight 在运行时,如果出现如下错误: 检查生成的xap文件,解压出来,看是否里面包含该DLL:Syncfusion.Silverlight.Olap.Gauge.OlapGauge

  7. HTML标签大全

    HTML标签解释大全 一.HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(DTD). 标签:a 说明:标明超链接的起始或目的位置. 标签:acronym 说明:标 ...

  8. 微信小程序开发1

    关于微信小程序的开发.对于我们这些没学过oc或者android的人来说,无疑是一个令人鸡冻的好消息.这段时间研究了微信小程序开发.关于小程序的注册,认证和基础环境的搭建,官方文档已经非常详细了.这里就 ...

  9. Linux vi入门必备

    一.vi.vim介绍   文本编辑器分为: (1)基于图形界面,如gedit.geany等: (2)基于命令行,如nano.vi.joe等: 每个命令行界面的文本编辑器都有各自不同的快捷键,比如nan ...

  10. 正则表达式删除指定的HTML 标签

    1.抓取某网页的数据后(比如描述),如果照原样显示的话,可能会因为它里面包含没有闭合的HTML标签而打乱了格式,也可能它里面用了比较让人 "费解" 的HTML标签,把预订的格式搅乱 ...