純js實(shí)現(xiàn)畫一棵樹的示例
更新時(shí)間：2017年09月05日 08:53:01 作者：霧行者
下面小編就為大家?guī)硪黄僯s實(shí)現(xiàn)畫一棵樹的示例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
用純js畫一棵樹。思路：
1、一棵樹的圖片，作為頁面背景；
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)畫一棵樹的示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JS往數(shù)組中添加項(xiàng)性能分析的相關(guān)資料,需要的朋友可以參考下2015-02-02
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-01
JavaScript Event學(xué)習(xí)補(bǔ)遺 addEventSimple
這里有個(gè)addEventSimple和removeEventSimple函數(shù)，有時(shí)候需要不那么顯眼的事件處理程序的時(shí)候我就用這兩個(gè)函數(shù)注冊(cè)。2010-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xià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-09
js實(shí)現(xiàn)的二級(jí)橫向菜單條實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)的二級(jí)橫向菜單條,是非常美觀簡潔的二級(jí)導(dǎo)航條效果,可實(shí)現(xiàn)針對(duì)鼠標(biāo)事件的動(dòng)態(tài)響應(yīng)及頁面樣式切換功能,簡單實(shí)用,需要的朋友可以參考下2015-08-08
js中小數(shù)轉(zhuǎn)換整數(shù)的方法有很多，有下退、上進(jìn)、四舍五入等等，需要的朋友可以了解下本文2014-01-01
這篇文章主要介紹了微信小程序獲取地址的具體方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12