用纯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. Ubuntu下解决apt update时签名无效问题

    Ubuntu 18.04在执行apt-get update时出现一下报错: W: GPG 错误:http://repo.mysql.com/apt/ubuntu bionic InRelease: 下 ...

  2. L08-Linux解决Device eth0 does not seem to be present,delaying initialization问题

    问题前提: 在VirtualBox中克隆Linux服务器,如下,由Centos6.5_Base克隆得到node01服务器,采用的是完全克隆的方式,克隆时重新初始化MAC地址. 原服务器Centos6. ...

  3. 阿里云服务器18个数据中心测试IP地址以及测试方法

    我们用户在选择阿里云服务器的时候是不是感觉阿里云的数据中心太多太多,确实阿里云服务器机房是有很多,国外国外机房大约有18个,甚至更多,因为还在不断的增加机房.对于商家而言增加不同的机房可以满足不同的项 ...

  4. mybatis的mapper.xml使用parameterType使用的报错

    错误在于一个写的get(Long id)的查询方法, 而在Mapper.xml中我定义了这个接收的参数的类型是int类型, 结果就报了如下的错误 org.mybatis.spring.MyBatisS ...

  5. python实现计算器功能

    import re def strip_operate(exp): # 合并多余的操作符 exp = exp.replace("+-", "-") exp = ...

  6. 【实战】某项目SQL注入引发的思考

    数据包: 测试参数:username,测试payload: ' ' or '1'='1 ' or '1'='2 响应结果都未发生任何变化,借助sqlmap测试,结果一样: 尝试在or前面进行简单的fu ...

  7. postgresql客户端连接错误的解决方法【转】

    今天在重新设置postgresql服务器以后却发现启动不了服务器.错误如下:psql: could not connect to server: No such file or directory   ...

  8. Mac下的浏览器类似Windows中Ctrl＋F5的不请求缓存刷新页面的快捷键

    正常方式: [shitf]+[command]+[r] 如果改过快捷键的: [fn]+[shift]+[command]+[f]

  9. 【Guava】Optional接口来避免空指针错误

    null会带来很多问题,从开始有null开始有无数程序栽在null的手里,null的含义是不清晰的,检查null在大多数情况下是不得不做的,而我们又在很多时候忘记了对null做检查,在我们的产品真正投 ...

  10. TensorFlow架构与设计：概述

    TensorFlow是什么? TensorFlow基于数据流图,用于大规模分布式数值计算的开源框架.节点表示某种抽象的计算,边表示节点之间相互联系的张量. TensorFlow支持各种异构的平台,支持 ...