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. Mac Pro 开机自启动 PHP-FPM，Nginx，MySql 等软件

    在Mac下安装好了PHP开发环境(PHP-FPM,Nginx,MySql), 想设置成开机自启动,原来以为和一般的Linux系统一样,也是在rc.d这样目录放置启动脚本.在网上查了一些资料,发现苹果应 ...

  2. lua 使用

    根据公司自身业务需要,总结常用到的lua语法 Lua中的string库 链接:http://www.jb51.net/article/57613.htm string.len(s)          ...

  3. CentOS7.0安装Nginx 1.7.9

    一.安装准备 首先由于nginx的一些模块依赖一些lib库,所以在安装nginx之前,必须先安装这些lib库,这些依赖库主要有g++.gcc.openssl-devel.pcre-devel和zlib ...

  4. Lua模块测试

    Lua模块 ---------------------------------------------------------- ----------------------- 模块测试module_ ...

  5. MongoDB的学习和使用(MongoDB GridFS)

    MongoDB GridFS GridFS 用于存储和恢复那些超过16M(BSON文件限制)的文件(如:图片.音频.视频等). GridFS 也是文件存储的一种方式,但是它是存储在MonoDB的集合中 ...

  6. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  7. Android活动管理工具

    ActivityCollector.java import android.app.Activity; import java.util.ArrayList; import java.util.Lis ...

  8. 4 Handler相关类——Live555源码阅读(一)基本组件类

    这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. Handler相关类概述 处理程序相关类一共有三个,其没有派生继承关系,但是其有友元关系和使用关系 ...

  9. 7.4---加法替代运算（CC150）

    注意:1,除法那里b+=b是错的.b一直在改变.   2,仔细一点. import java.util.*; public class AddSubstitution { public int cal ...

  10. matplotlib绘制直方图【柱状图】

    代码: def drawBar(): xticks = ['A', 'B', 'C', 'D', 'E']#每个柱的下标说明 gradeGroup = {'A':200,'B':250,'C':330 ...