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. 基于C++／Lua的游戏服务器如何实现?

    1.首先要自己实现一个网络库,或者选择已经开源的网络库.比如:muduo.libevent.boost的asio等.2.实现核心功能:连接管理,消息管理,定时器,事件机制,Lua脚本引擎,程序模块管理 ...

  2. Ubuntu 14 安装 Chrome/Chromium flash播放器

    在命令终端中执行如下命令即可: sudo apt-get install pepperflashplugin-nonfree sudo update-pepperflashplugin-nonfree ...

  3. 错误:The Controls collection cannot be modified because the control contains code blocks (i.e. ). .

    用 <%# %>这种写法是写在数据绑定控件中的,之所以用 <%= %>会出现The Controls collection cannot be modified because ...

  4. Javascript高级程序设计——this、闭包、函数表达式

    在javascript中函数声明会被提升,而函数表达式不会被提升.当函数执行时,会创建一个执行环境和相应的作用域链,然后利用arguments和其他的命名参数的值来初始化函数的活动对象,作用域链链中所 ...

  5. scoll滚动

    [前端性能]高性能滚动 scroll 及页面渲染优化   最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优 ...

  6. HDu1003(maxn sum)

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABBcAAAMDCAYAAAD5XP0yAAAgAElEQVR4nOy97a8c133n2X+H3xjIC4

  7. 引擎崩溃、异常、警告、BUG与提示总结及解决方法

    http://www.58player.com/blog-635-128.html [Unity3D]引擎崩溃.异常.警告.BUG与提示总结及解决方法   此贴会持续更新,都是项目中常会遇到的问题,总 ...

  8. c++ 操作符重载和友元

    操作符重载(operator overloading)是C++中的一种多态,C++允许用户自定义函数名称相同但参数列表不同的函数,这被称为函数重载或函数多态.操作符重载函数的格式一般为: operat ...

  9. 单臂路由与三层交换机实现VLAN通信

    不同VLAN之间相互通信的两种方式 (单臂路由.三层交换) 试验环境:东郊二楼第三机房 试验设备:Catalyst 2950-24(SW3)                   Cisco 2611( ...

  10. js之DOM和事件

    DOM 查找 直接查找 var obj = document.getElementById('i1') 间接查找 文件内容操作: innerText 仅文本 innerHTML 全内容 value i ...