用纯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. PHP性能优化四（业务逻辑中使用场景）

    php脚本性能,很多时候依赖于你的php版本.你的web server环境和你的代码的复杂度. Hoare曾经说过“过早优化是一切不幸的根源”.当你想要让你的网站更快运转的时候,你才应该去做优化的事情 ...

  2. CentOS6.5下samba服务

    为减少错误已提前关掉了SELinux,防火墙. 安装rpm包: samba-3.6.9-164.el6.x86_64.rpm 启动检测:samba服务可以正常启动!(证明RPM安装正常) 配置文件位置 ...

  3. ansible api2.0 多进程执行不同的playbook

    自动化运维工具:ansible 多进程调用ansible api的应用场景:   应用系统检查 一个应用系统可能具有20—50台服务器的集群,初步的系统层面检查可以用一个统一的playbook来检查, ...

  4. 42.oracle物化视图

    写在前面 先大概列一下数据库表设计的常规流程.方案.要遵循的规则 根据业务切分设计表 逻辑分层(数据库分层) 数据库结构设计与拆分:水平拆分(mysql分片)oracle分区物化视图中间表设计方案 优 ...

  5. jQuery 事件注册

    重点事件注册.on() <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset= ...

  6. swagger注释API详细说明

    API详细说明 注释汇总 @RequestMapping此注解的推荐配置 value method produces 示例: @ApiOperation("信息软删除") @Api ...

  7. PHP队列的实现 算法

    <?php /** * php队列算法 * * Create On 2010-6-4 * Author Been * QQ:281443751 * Email:binbin1129@126.co ...

  8. .net core webapi 使用过滤器。

    过滤器一般用于权限校验.日志处理... 一:ActionFilterAttribute过滤器. 1:建一个类,继承于ActionFilterAttribute抽象类. public class Log ...

  9. xenu简单介绍

    目录: 1.软件介绍 2.软件作用 3.功能特点 4.测试原理 5.使用说明 6.状态识别 工具下载链接:https://pan.baidu.com/s/1i4I9QK1 密码:lej7 1.软件介绍 ...

  10. 工具软件推荐——GifCam

    博文里面的动态gif图片都是使用这款软件录制的,可以选择帧率,清晰度,并且编辑每一帧的图片,非常好用,特此推荐~ 注意: GifCam 是一款免费绿色的软件. 大家尽量在官方下载 下载地址. 最新的版 ...