js画一棵树

最新推荐文章于 2022-05-20 11:45:35 发布

weixin_30826761

最新推荐文章于 2022-05-20 11:45:35 发布

阅读量814

点赞数

文章标签：前端数据结构与算法 javascript ViewUI

原文链接：http://www.cnblogs.com/mistwalker/p/7473478.html

版权

　　用纯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>