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. JAVA 如何使JScrollPane中的JTextArea自动滚动到最后一行？

    1.要使JTextArea带有滚动条,需将JTextArea对象添加到JScrollPane中. JTextArea logArea = new JTextArea(15, 35); //创建JTex ...

  2. 第六天 做的app不会改变什么

    app包括资源和功能,做完之后没有改变什么

  3. brew gradle

    cat /usr/local/Library/Taps/homebrew/homebrew-versions/gradle221.rb GRADLE_HOME=/Users/temp/gradle22 ...

  4. vue.js 简单入门

    转载自:http://blog.csdn.net/violetjack0808/article/details/51451672 <!DOCTYPE html> <html lang ...

  5. Javascript高级程序设计——基本包装类型

    既然js中的基本类型没有属性和方法那么为什么对字符串进行subString()方法可以呢?基本类型不应该没有方法的吗? 这就是基本包装类型啦! ECMAScript提供了三个特殊的引用类型,Boole ...

  6. ProgressDialog使用总结

    以前对ProgressDialog不太熟练,特地看到的这个文章 ProgressDialog的使用  ProgressDialog 继承自AlertDialog,AlertDialog继承自Dialo ...

  7. mongodb 维护

    如何释放空间? 1. 先用 remove 命令删除数据 2. repair.需要停机,即便你不停机的话 mongodb 自己也会锁住直到 repair 完成.注意要有足够的磁盘空间,需要额外一倍的空间 ...

  8. storyboard有多个Segue的传递

    在项目中需要在一个页面向多个页面传不同的值. 在view2Controller和view3Controller中分别有相应的Str2和Str3 - (void)prepareForSegue:(UIS ...

  9. ndk学习20: jni之OnLoad动态注册函数

    一.原理 当在系统中调用System.loadLibrary函数时,该函数会找到对应的动态库, 然后首先试图找到"JNI_OnLoad"函数,如果该函数存在,则调用它 JNI_On ...

  10. 批量 kill mysql 中运行时间长的sql

    1.通过information_schema.processlist表中的连接信息生成需要处理掉的MySQL连接的语句临时文件,然后执行临时文件中生成的指令 mysql> select conc ...