使用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. mysql避免插入重复数据

    我们在进行数据库操作的时候,有时候需要插入不重复的数据.所谓不重复的数据,可以是某个字段不重复,也可以是某几个字段重复.当然我们可以在插入之前先将数据库的数据查询出来,然后与将要插入的数据进行对比,如 ...

  2. Specialized Four-Digit Numbers

    Problem Description Find and list all four-digit numbers in decimal notation that have the property ...

  3. 查找字符对应Unicode码的十进制数字

    //将字符转换为Unicode码中字符对应十进制数字 int byte0 = 'A' & 0xff;//byte0=65 参考文档:http://baike.baidu.com/view/26 ...

  4. 自定义 404 与 500 错误页面，URL 地址不会重定向（二）

    上一篇是使用了全局过虑器来实现,还可以使用 HttpApplication 来处理. 参考文章: http://www.cnblogs.com/dudu/p/aspnet_custom_error.h ...

  5. 测试 IE 浏览器兼容性 VirtualBox + modern.ie

    VirtualBox 是开源的虚拟机软件,常用的虚拟机软件还有 VMware / Hyper-V / Paralles Desktop . modern.ie 是微软官方提供的用于测试网页在各版本 I ...

  6. 写一个函数，将一个int型的数组做为参数传入，使用指针返回两个结果:最大值和最小值

    今日下午研究了一下c语言中的指针问题,c语言的核心是指针,指针的核心是地址,地址的核心是内存. #include <stdio.h> void hanshu(int *arry,int s ...

  7. Java Script基础（四） BOM模型

    一.BOM模型 BOM模型(Browser Object Model),也称为文档对象模型,它包含浏览器相关的属性和方法,例如操作,前进后退按钮,控制地址栏,关闭浏览器窗口,打开新窗口等等.它包含的对 ...

  8. 正则转nfa：完成

    太累了,感觉不会再爱了.问题已经解决,具体的懒得说了. #include "regular_preprocess.h" //这个版本终于要上nfa了,好兴奋啊 //由于连个节点之间 ...

  9. Windows重新建立图标缓存

    有的时候,快捷方式的图标会因各种优化软件而变得面目全非,这时就需要重新建立图标缓存 新建一个文本文档,把文件的后缀名修改成.bat 的例如 icon.bat 在里面填写下面的内容: rem 关闭exp ...

  10. hdu-5698 瞬间移动(数论+快速幂)

    题目链接: 瞬间移动 Problem Description   有一个无限大的矩形,初始时你在左上角(即第一行第一列),每次你都可以选择一个右下方格子,并瞬移过去(如从下图中的红色格子能直接瞬移到蓝 ...