使用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. 机顶盒Demux

    主页http://www.videolan.org/vlc/ 机顶盒软件开发仿真平台的设计与实现http://max.book118.com/html/2012/0311/1260745.shtm

  2. XAMPP搭建的几个注意事项

    使用xampp搭建php本地开发环境是一个不错的解决方案. 我搭建时选择的是不使用安装包安装,再启动过程中出现了些问题. xampp下载地址:http://www.apachefriends.org/ ...

  3. Android 高级UI设计笔记11：Gallery（画廊控件）之Gallery基本使用

    1. 这里要向大家介绍Android控件Gallery(画廊控件) Gallery控件主要用于横向显示图像列表,不过按常规做法.Gallery组件只能有限地显示指定的图像.也就是说,如果为Galler ...

  4. CNZZ每天百亿条日志写入，SLS+ODPS轻松拆招

    如果你是一个站长,想要提交一个查询,从一亿多条日志中找出从湖南省发出.使用ISP电信.通过百度搜索跳转到达的访问日志.该怎么做? 别急,在接收到您的查询条件后,CNZZ可以快速通过SLS(简单日志服务 ...

  5. UIButton的简单操作和实际应用

    不能使用点语法创建button的文本和颜色,因为button具有多种状态   //这里创建一个圆角矩形的按钮UIButton *button1 = [UIButton buttonWithType:U ...

  6. [python] HDU自动登录提交代码程序

    调了一个下午,被python的正则绊住了:在C#上运作好好的式子在python老是报错,原来python的断言式必须是固定长度的,像类似(?<=[^>].*?)的零宽度正回顾后发断言是不允 ...

  7. 转: Android入门及效率开发

    评注: android第三方开源框架介绍不错 转:https://segmentfault.com/a/1190000004495351 入门 Android官方培训课程中文版:http://huka ...

  8. 【转】c语言入门教程 / c语言入门经典书籍

    用C语言开始编写代码 初级:C语言入门必备 (以下两本书任选一本即可) C语言是作为从事实际编程工作的程序员的一种工具而出现的,本阶段的学习最主要的目的就是尽快掌握如何用c语言编写程序的技能.对c语言 ...

  9. CSS之隐藏元素

    1.opacity=0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件的2.visibility=hidden,该元素隐藏起 ...

  10. 浅谈sqlserver数据库优化（一）----开光篇

    今天暂时无事,风和日丽,万里无云.游山的.玩水的.遛麻雀的都闲的不亦乐乎,也忙的不亦乐乎.在这美好的季节,依旧躲在被窝或是电脑旁绞尽脑汁敲键盘的人们,也别有一番滋味.废话少说,言归正传. 赶上了一个最 ...