純js實(shí)現(xiàn)畫一棵樹的示例
用純js畫一棵樹。思路:
1、一棵樹的圖片,作為頁(yè)面背景;
2、通過html5中的canvas畫布進(jìn)行遮罩;
3、定時(shí)每隔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);//清除定時(shí) ctx.clearRect(0, 0, c.width, c.height); } }, 10);//每隔10ms清除1px的遮照 </script> </body> </html>
畫的過程如下:
以上這篇純js實(shí)現(xiàn)畫一棵樹的示例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)首屏延遲加載實(shí)現(xiàn)方法 js實(shí)現(xiàn)多屏單張圖片延遲加載效果
這篇文章主要介紹了js實(shí)現(xiàn)首屏延遲加載實(shí)現(xiàn)方法,以及js實(shí)現(xiàn)多屏單張圖片延遲加載效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07體驗(yàn)js中splice()的強(qiáng)大(插入、刪除或替換數(shù)組的元素)
javascript splice()算是最強(qiáng)大的了,它可以用于插入、刪除或替換數(shù)組的元素。下面來一一介紹,感興趣的朋友2013-01-01JavaScript Event學(xué)習(xí)補(bǔ)遺 addEventSimple
這里有個(gè)addEventSimple和removeEventSimple函數(shù),有時(shí)候需要不那么顯眼的事件處理程序的時(shí)候我就用這兩個(gè)函數(shù)注冊(cè)。2010-02-02微信小程序?qū)崿F(xiàn)簡(jiǎn)單Tab切換效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單Tab切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05關(guān)于javascript DOM事件模型的兩件事
DOM事件模型的兩件事:事件捕捉(Event Capture)的實(shí)現(xiàn)問題以及IE的高級(jí)事件處理模型的問題。2010-07-07詳解html-webpack-plugin插件(用法總結(jié))
這篇文章主要介紹了詳解html-webpack-plugin插件(用法總結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09js實(shí)現(xiàn)的二級(jí)橫向菜單條實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)的二級(jí)橫向菜單條,是非常美觀簡(jiǎn)潔的二級(jí)導(dǎo)航條效果,可實(shí)現(xiàn)針對(duì)鼠標(biāo)事件的動(dòng)態(tài)響應(yīng)及頁(yè)面樣式切換功能,簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08