WEB前端开发学习：源码canvas 雪

双旦节要到了，程序员们为了响应气氛，特别用代码制作了动态雪花，WEB前端开发学习的初学者们一起跟着案例做一遍吧！

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body style="overflow: hidden;margin: 0; padding: 0;">

<canvas id="canvas" style="background:url(http://cdn.attach.qdfuns.com/notes/pics/201612/20/141059idgd55hz7mkxpw6m.jpg);background-size:100% 100%;">您的浏览器暂不支持canvas</canvas>

<script>

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

canvas.width=window.innerWidth;

canvas.height=window.innerHeight;

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

var balls=[];

function draw(ball){

ctx.beginPath();

ctx.arc(ball.x,ball.y,ball.r,0,2*Math.PI);

ctx.globalAlpha=0.7;

ctx.fillStyle="#ffffff";

ctx.shadowColor="#ffffff";

ctx.shadowBlur=20;

ctx.fill();

}

function star(){

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

var ball={

x:Math.random()*canvas.width/2+canvas.width/2,

y:0,

r:Math.random()*4,

vx:Math.random()-0.5,

vy:Math.random()+1,

}

balls.push(ball);

}

drawball();

}

function drawball(){

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

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

balls[i].x+=balls[i].vx*5;//改变x轴位置

balls[i].y+=balls[i].vy*2;//Y轴

balls[i].index=i;

if(balls[i].y>canvas.height/1.7){

balls.splice(balls[i].index,1);

continue;

}

draw(balls[i]);

}

}

setInterval(function(){

star();

},10);

</script>

</body>

</html>

　　无论你是学生，还是工作，也或者你正在努力找工作，想要在web前端知识领域有所涉入和提高的，有官方平台提供给你互相交流和学习!更多小案例等你来下载，搜web前端学习部落22群加入。。。

WEB前端开发学习：源码canvas 雪的更多相关文章

  1. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  2. web前端开发学习：jQuery的原型中的init

    web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...

  3. Web 前端开发学习之路（入门篇）

    字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.＝＝ ...

  4. 关于web前端开发学习的顺序

    学习web前端开发该怎么学,按照什么顺序学习,这是很多新手朋友会遇到的问题.下面简单的说一下.由于在国内大学课程里面,几乎没有前端开发这门课程,无非就是一些网页设计之类的课程,但那些课程无论是老师讲还 ...

  5. web前端开发学习路线图

    Web前端是一个入行门槛较低的开发技术,但更是近几年热门的职业,web前端不仅薪资高发展前景好,是很多年轻人向往的一个职业,想学习web前端,那么你得找到好的学习方法,以下就给大家分享一份适合新手小白 ...

  6. Web前端开发学习误区，你掉进去了没？

    从接触网站开发以来到现在,已经有五个年头了吧,今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时,勾起了在这网站开发道路上的一串串回忆,成功与喜悦.烦恼与纠结都历历在目,感慨颇多. 先 ...

  7. 小白入门Web前端开发学习一周小结

    说之前还是先说点其他的,简单介绍下自己为何选择web前端开发: 本人之前在一家国企单位从事质检工作,干了3年,工资和待遇还算不错,但由于其工作的流动性导致知识的脱轨以及精神上的空缺,最后还是打算在25 ...

  8. web 前端开发学习路线

    初级 HTML 5 HTML 5 与 HTML 4 的区别 HTML 5 新增的主体结构元素 HTML 5 新增的非主体结构元素 HTML 5 表单新增元素与属性 HTML 5 表单新增元素与属性(续 ...

  9. web前端开发学习路径图

    第一阶段 WEB前端工程师课程 HTML语句,HTML页面结构.css语法.style属性.link和style标签.id属性.等HTML语句中的相关属性: 通过Dreamweaver制作出跨越平台限 ...

随机推荐

  1. 采用Atlas+Keepalived实现MySQL读写分离、读负载均衡【转载】

      文章 原始出处 :http://sofar.blog.51cto.com/353572/1601552 ============================================== ...

  2. windows 下安装 mysql

    1.根据系统,选择下载mysql community server(32/64) 版本 2.解压下载的文件 3.配置环境变量 将mysql目录下的bin目录路径配置到环境变量Path中,如下图所示 4 ...

  3. Qt5 托盘模仿qq闪烁，弹消息框实现

    在别人代码基础上做的,课设刚好用上了,贴出来分享Qt5.5.1实现. 图片自己找. #ifndef DIALOG_H #define DIALOG_H #include <QDialog> ...

  4. Pólya计数定理

    我日啊..被cls的计数题虐得欲仙欲死...根本不会计数QAQ... 不懂数学啊... 前置技能 群 群是二元组\((G,*)\),满足 \(*:(G,G)\rightarrow G\) \(\exi ...

  5. ubuntu彻底卸载mysql

    1.删除mysql sudo apt-get autoremove --purge mysql-server-5.0 sudo apt-get remove mysql-server sudo apt ...

  6. Vim保存只读模式下的修改

    用 vim 打开没有写权限的文件而忘记用 sudo 时,文件变成 read-only这时候用 :w!, SHIFT+ZZ,或者 qw! 都无法保存 :w !sudo tee % :w : Write ...

  7. 二叉树节点个数题目[n0,n1,n2]

    若完全二叉树的节点个数为2N-1,则叶节点个数为()    A)N-1        B)2×N        C)2N-1        D)2N解析:    结点拥有的子树数为结点的度    证明 ...

  8. ios iphone6 Plus 的适配问题

    最近更新一个老程序,发现在iphone6 plus上用nslog打印出的screen 的frame还是320*568, 不是414*736, 查了一下,原来需要设置iphone6 plus的启动画面才 ...

  9. 一个不错的定位API网站

    2015年5月2日 15:36:31 星期六 http://www.haoservice.com/

  10. Windows下给鼠标右键菜单添加获得完全控制权限的菜单项

    这段时间计算机C分区里多了很多无用的文件,而且不在同一个目录下,搜索出来删除的时候提示没有管理员权限,需要在右键属性里面修改,非常麻烦,于是查询了一下发现可以在文件右键菜单添加一个获取权限的菜单项,这 ...