整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
击查看瀑布特效
实话说，这不像是一个瀑布，倒像是天上下石头，但是咱们写代码的，不要在意这些细节，重点是思路，逻辑，以及具体实现效果的方法。在布局方面，因为是用HTML5/canvas，所以只需要一个canvas画布即可，也就是一行代码：
<canvas id="canvas" width="400" height="500"></canvas>
CSS样式也只需要大概的设置下，代码量不多，这次的效果重点是javascript的代码，因为都是用的原生javascript，没有调用插件，看过我以前写的特效的朋友就知道，我一般都强调的就是基础的原生javascript的重要性，特别是现在各种插件以及框架流行，初学者一旦盲目的去学框架，而忽略原生javascript的话其实是很难找工作的，因为每个公司使用的插件以及框架都未必是一样的，也未必会一直使用。但是如果你原生javascript的基础很扎实，那么不管是什么框架或者插件，你都能在很短时间内掌握，使用，迅速创造价值，这也是很多公司喜欢的人才！万丈高楼平地起！不多说，直接上源码！
如果想要更多的企业求职加分项目，案例，学习方法可以来一下我的前端群570946165，每天都会精挑细选一个特效，项目出来详细讲解，分享！包括答疑解惑！
HTML5+javascript打造瀑布特效源码：
代码过长需要文档版源码来我的前端群570946165，已上传到群文件
头条号里有许多web前端学习视频/源码，企业常用特效/案例/项目，敬请关注！
这是哪？
TML4几乎没有绘图的功能，通常只能显示已有的图片；而HTML5则集成了强大的绘图功能。在HTML5中可以通过下面的方法进行绘图：
借助HTML5的绘图功能，既可以美化网页界面，也可以实现专业人士的绘图需求。本书将在第5章介绍使用Canvas API画图的方法，游戏开发中主要使用Canvas API画图来实现游戏界面。
【例】要使用Canvas API画图实现绘制坦克图案。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1>html5-坦克大战</h1>
<!--坦克大战的战场-->
<canvas id="tankMap" width="400px"height="300px"style="background-color:black"></canvas>
<script type="text/javascript">
//得到画布
varcanvas1 = document.getElementById("tankMap");
//定义一个位置变量
var heroX= 80; var heroY = 80;
//得到绘图上下文
var cxt =canvas1.getContext("2d");
//设置颜色
cxt.fillStyle="#BA9658";
//左边的矩形
cxt.fillRect(heroX,heroY,5,30);
//右边的矩形
cxt.fillRect(heroX+17,heroY,5,30);
//画中间的矩形
cxt.fillRect(heroX+6,heroY+5,10,20);
//画出坦克的盖子
cxt.fillStyle="#FEF26E";
cxt.arc(heroX+11,heroY+15,5,0,360,true);
cxt.fill();
//画出炮筒
cxt.strokeStyle="#FEF26E";
cxt.lineWidth=1.5;
cxt.beginPath();
cxt.moveTo(heroX+11,heroY+15);
cxt.lineTo(heroX+11,heroY);
cxt.closePath();
cxt.stroke();
</script>
</body>
</html>
浏览网页效果如图1-5所示。
如果想要学习视频，交流讨论，请按照下图所示输入私信“申请加入”获取加群链接~~~
注本头条号，专注做前端。
前面分享了很多前端好玩的东西，比如程序员给女朋友打造的3d相册等，下面分享一个牛人jquery+html5（canvas）做的仿早期windows画图工具，它提供了一个白板，你可以随意的画画，功能和界面简直跟windows画图一抹一样，甚至一样支持快捷键，达到了超级逼真的程度。
不得不感叹canvas的强大。
//
*请认真填写需求信息，我们会在24小时内与您取得联系。
