用纯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. centos启动错误：Inodes that were part of a corrupted orphan linked list found.

    centos启动时,提示错误: /dev/mapper/VolGroup-lv_root contains a file system with errors,check forced. /dev/m ...

  2. 线索二叉树的理解和实现(Java)

    线索二叉树的基本概念 我们按某种方式对二叉树进行遍历,将二叉树中所有节点排序为一个线性序列,在该序列中,除第一个结点外每个结点有且仅有一个直接前驱结点:除最后一个结点外每一个结点有且仅有一个直接后继结 ...

  3. 架构师养成记--37.简单shell编程

    一.HelloWord.sh echo 表示打印,可以在sh文件中写诸如pwd.ls 这样的命令,使用命令的时候尽量使用全路径. #!/bin/sh #this is my first sh echo ...

  4. Drupal V7.3.1 框架处理不当导致SQL注入

    这个漏洞本是2014年时候被人发现的,本着学习的目的,我来做个详细的分析.漏洞虽然很早了,新版的Drupal甚至已经改变了框架的组织方式.但是丝毫不影响对于漏洞的分析.这是一个经典的使用PDO,但是处 ...

  5. Neo4j使用简单例子（转）

    Neo4j Versions Most of the examples on this page are written with Neo4j 2.0 in mind, so they skip th ...

  6. java处理数据库的CRUD

    package com.lhy.jdbc.util; import java.sql.Connection; import java.sql.PreparedStatement; import jav ...

  7. [问题解决]Android7.0上PopupWindow的showAsDropDown位置问题

    [问题解决]Android7.0上PopupWindow的showAsDropDown位置问题 /** * Created by diql on 2017/02/16. */ 问题说明 我的popup ...

  8. erlang尾递归练习

    1 %%计算链表长度尾递归实现 2 lez(N) -> lez(N, 0). 3 4 lez([], Acc) -> Acc; 5 lez([_ | T], Acc) -> lez( ...

  9. 标准差(bias) 方差(variance)

    偏差(bias) 偏差度量了学习算法的期望预测与真实结果的偏离程序, 即 刻画了学习算法本身的拟合能力 . 方差(variance) 方差度量了同样大小的训练集的变动所导致的学习性能的变化, 即 刻画 ...

  10. Velocity工作原理解析和优化

    在MVC开发模式下,View离不开模板引擎,在Java语言中模板引擎使用得最多是JSP.Velocity和FreeMarker,在MVC编程开发模式中,必不可少的一个部分是V的部分.V负责前端的页面展 ...