用纯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画一棵树的更多相关文章

  1. js实现一棵树的生长

    参考链接:https://blog.csdn.net/u010298576/article/details/76609244 HTML网页源码: 1 <!DOCTYPE html> 2 & ...

  2. hdu6035 Colorful Tree 树形dp 给定一棵树，每个节点有一个颜色值。定义每条路径的值为经过的节点的不同颜色数。求所有路径的值和。

    /** 题目:hdu6035 Colorful Tree 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6035 题意:给定一棵树,每个节点有一个颜色值.定 ...

  3. LeetCode——Same Tree（判断两棵树是否相同）

    问题: Given two binary trees, write a function to check if they are equal or not. Two binary trees are ...

  4. 小希的迷宫（MST单棵树判断法则）

    小希的迷宫 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  5. 【LeetCode】Symmetric Tree 推断一棵树是否是镜像的

    题目:Symmetric Tree <span style="font-size:18px;"><span style="font-size:18px; ...

  6. A Simple Problem with Integers（100棵树状数组）

    A Simple Problem with Integers Time Limit: 5000/1500 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  7. 用JS画斐波那契螺旋线（黄金螺旋线）

    偶然看到斐波那契螺旋线(黄金螺旋线)的定义及画图方法,试着用JS画了一下,很漂亮,很好玩 具体定义及画法大家查一下就有了,很简单. 以下是代码: <!DOCTYPE html> <h ...

  8. 2017年陕西省网络空间安全技术大赛——种棵树吧——Writeup

    2017年陕西省网络空间安全技术大赛——种棵树吧——Writeup 下载下来的zip解压得到两个jpg图片,在Kali中使用binwalk查看文件类型如下图: 有两个发现: 1111.jpg 隐藏了一 ...

  9. bzoj 2816: [ZJOI2012]网络 (LCT 建多棵树)

    链接:https://www.lydsy.com/JudgeOnline/problem.php?id=2816 题面: http://www.lydsy.com/JudgeOnline/upload ...

随机推荐

  1. CTF中常见的 PHP 弱类型漏洞总结

    作者:ZERO    所属团队:Arctic Shell 参考资料: http://archimesan.me/2017/12/21/php%E5%BC%B1%E7%B1%BB%E5%9E%8B%E6 ...

  2. 爬虫6：pyquery库

      强大又灵活的网页解析库,如果觉得正则写起来太麻烦,BeautifulSoup语法太难记,而你又熟悉jQuery的语法,那么用PyQuery就是最佳选择     一. 初始化 1. 字符串初始化 h ...

  3. python基础知识梳理----5dict 字典的应用

    内容简介: 1:字典简介 2:字典的增删该查 3:字典嵌套 1: 字典(dict)是python中唯一的一个映射类型.他是以{ }括起来的键值对组成. 在dict中key是唯一的. 在保存的时候, 根 ...

  4. leetcode-77-组合

    题目描述: 给定两个整数 n 和 k,返回 1 ... n 中所有可能的 k 个数的组合. 示例: 输入: n = 4, k = 2 输出: [ [2,4], [3,4], [2,3], [1,2], ...

  5. ORACLE 动态执行SQL语句

    本文转自 http://zhaisx.iteye.com/blog/856472 Oracle 动态SQL Oracle 动态SQL有两种写法:用 DBMS_SQL 或 execute immedia ...

  6. ReactNative 打包 APK

    ReactNative打包步骤: 1.在项目的根目录执行下面这行命令: keytool -genkey -v -keystore my-release-key.keystore -alias my-k ...

  7. stark - 5 ⇲ 其他常用功能

    Ⅰ 排序 当数据量增多,对于数据 我们应该能够指定如何排序的.且此功能应该是可以给用户自定义进行配置的. 这是StarkHandler类的方法1 order_list = [] def get_ord ...

  8. notepad++中配置python运行命令

    1.安装notepad++ 2.打开notepad++ 3.键盘上按下“F5”,在弹出的命令菜单中输入“cmd /k C:\Python30\python.exe "$(FULL_CURRE ...

  9. RocketMQ消息发送的队列选择与容错策略

    一个topic有多个队列,分散在不同的broker.producer在发送消息的时候,需要选择一个队列 producer发送消息全局时序图: 队列选择与容错策略结论: 在不开启容错的情况下,轮询队列进 ...

  10. (转载)Android xml资源文件中@、@android:type、@*、？、@+引用写法含义以及区别

    原帖地址:http://blog.csdn.net/zfrong/article/details/7332545 Android xml资源文件中@.@android:type.@*.?.@+引用写法 ...