純js實現(xiàn)畫一棵樹的示例
更新時間:2017年09月05日 08:53:01 作者:霧行者
下面小編就為大家?guī)硪黄僯s實現(xiàn)畫一棵樹的示例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
用純js畫一棵樹。思路:
1、一棵樹的圖片,作為頁面背景;
2、通過html5中的canvas畫布進行遮罩;
3、定時每隔10ms,從下往上清除1px的遮罩;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My JS tree</title> <style> body { width: 1000px; height: 570px; background-image: url(image/tree.png); background-size: 1000px, 570px; background-repeat: no-repeat; margin-top: 0px; margin-bottom: 0px; } </style> </head> <body> <canvas id="mycanvas" width="1000px" height="570px"></canvas> <script> var c = document.getElementById("mycanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, c.width, c.height);//矩形遮住背景圖像 var y = c.height; window.setInterval(function() { if (y > 2) { ctx.clearRect(0, y - 1, c.width, y); y = y - 1; } else { window.clearInterval(this);//清除定時 ctx.clearRect(0, 0, c.width, c.height); } }, 10);//每隔10ms清除1px的遮照 </script> </body> </html>
畫的過程如下:
以上這篇純js實現(xiàn)畫一棵樹的示例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
js實現(xiàn)首屏延遲加載實現(xiàn)方法 js實現(xiàn)多屏單張圖片延遲加載效果
這篇文章主要介紹了js實現(xiàn)首屏延遲加載實現(xiàn)方法,以及js實現(xiàn)多屏單張圖片延遲加載效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07體驗js中splice()的強大(插入、刪除或替換數(shù)組的元素)
javascript splice()算是最強大的了,它可以用于插入、刪除或替換數(shù)組的元素。下面來一一介紹,感興趣的朋友2013-01-01JavaScript Event學習補遺 addEventSimple
這里有個addEventSimple和removeEventSimple函數(shù),有時候需要不那么顯眼的事件處理程序的時候我就用這兩個函數(shù)注冊。2010-02-02關(guān)于javascript DOM事件模型的兩件事
DOM事件模型的兩件事:事件捕捉(Event Capture)的實現(xiàn)問題以及IE的高級事件處理模型的問題。2010-07-07詳解html-webpack-plugin插件(用法總結(jié))
這篇文章主要介紹了詳解html-webpack-plugin插件(用法總結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09