整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
擊查看瀑布特效
實話說，這不像是一個瀑布，倒像是天上下石頭，但是咱們寫代碼的，不要在意這些細節，重點是思路，邏輯，以及具體實現效果的方法。在布局方面，因為是用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小時內與您取得聯系。
