用纯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. 开源代码MyCommons

    MyCommons是我在开发Android App中,经过多个项目的实践和应用,上十次修改的,总结起来的代码,目的是希望大家能够快速的完成项目的开发. 主要也是参考了afinal和xutils2个框架 ...

  2. day 28 :进程相关,进程池,锁,队列,生产者消费者模式

    ---恢复内容开始--- 前情提要: 一:进程Process  1:模块介绍 from multiprocessing import Process from multiprocessing impo ...

  3. JavaScript执行环境和作用域(链)的那些事

    执行环境 什么是执行环境 提起作用域,我们不得不说说什么是执行环境.执行环境定义了变量或函数有权访问的其他数据,并决定其各自的行为.每一个执行环境都有一个对应的变量对象,这个对象的作用就是保存在环境中 ...

  4. 高斯分布（Gaussian Distribution）的概率密度函数（probability density function）

    高斯分布(Gaussian Distribution)的概率密度函数(probability density function) 对应于numpy中: numpy.random.normal(loc= ...

  5. Mondrian系列

    1.Mondrian Schema Workbench 概念及常用参数 2.Schema Workbench 启动慢解决办法 3.自己写的第一个Schema文件 4.维度-退化维度 5.维度-共享维度 ...

  6. FileRecv VNCViewer 使用方法

    版本 区别 一路点点点 . 就ok了 看到这个页面 点击   vnc viewer 输入 老师 会告诉你 IP地址  点击 就ok

  7. ftpClient.retrieveFileStream导致FTPClient的后面操作失败

    问题代码: FTPFile[] fs = ftpClient.listFiles(); for (FTPFile ff : fs) { if (ff.getName().equals(fileName ...

  8. JavaScript设计模式（三） - 策略模式

    什么是策略模式? 策略模式支持在运行时由使用者选择合适的算法,对于使用者而言不用关心背后的具体实现,由使用者自动根据当前程序执行的上下文和配置,从已有的算法列列表中选择出合适的算法来处理当前任务.   ...

  9. 【Eclipse】在Project Explore中隐藏不需要显示的文件

    右击项目->Resource->Resource Filters->AddFilter type: Exclude allApplies to : Files (All childr ...

  10. codeblocks c++ 编译出错

    codeblocks编译出错 今天编译一个c++程序调用模板的时候,出现错误 error This file requires compiler and library support for the ...