js画一棵树
用纯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画一棵树的更多相关文章
- js实现一棵树的生长
参考链接:https://blog.csdn.net/u010298576/article/details/76609244 HTML网页源码: 1 <!DOCTYPE html> 2 & ...
- hdu6035 Colorful Tree 树形dp 给定一棵树,每个节点有一个颜色值。定义每条路径的值为经过的节点的不同颜色数。求所有路径的值和。
/** 题目:hdu6035 Colorful Tree 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6035 题意:给定一棵树,每个节点有一个颜色值.定 ...
- LeetCode——Same Tree(判断两棵树是否相同)
问题: Given two binary trees, write a function to check if they are equal or not. Two binary trees are ...
- 小希的迷宫(MST单棵树判断法则)
小希的迷宫 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- 【LeetCode】Symmetric Tree 推断一棵树是否是镜像的
题目:Symmetric Tree <span style="font-size:18px;"><span style="font-size:18px; ...
- A Simple Problem with Integers(100棵树状数组)
A Simple Problem with Integers Time Limit: 5000/1500 MS (Java/Others) Memory Limit: 32768/32768 K ...
- 用JS画斐波那契螺旋线(黄金螺旋线)
偶然看到斐波那契螺旋线(黄金螺旋线)的定义及画图方法,试着用JS画了一下,很漂亮,很好玩 具体定义及画法大家查一下就有了,很简单. 以下是代码: <!DOCTYPE html> <h ...
- 2017年陕西省网络空间安全技术大赛——种棵树吧——Writeup
2017年陕西省网络空间安全技术大赛——种棵树吧——Writeup 下载下来的zip解压得到两个jpg图片,在Kali中使用binwalk查看文件类型如下图: 有两个发现: 1111.jpg 隐藏了一 ...
- bzoj 2816: [ZJOI2012]网络 (LCT 建多棵树)
链接:https://www.lydsy.com/JudgeOnline/problem.php?id=2816 题面: http://www.lydsy.com/JudgeOnline/upload ...
随机推荐
- 爬虫实战1:使用requests和正则爬取电影信息
代码如下 # coding=utf-8 import requests from requests.exceptions import RequestException import re impor ...
- springboot自定义配置文件
前言:如果你一点spring的基础没有,建议你不要学习springboot,至少先有一个spring的项目经验或者自己搭建过spring的项目再学习springboot,这样你会发现在spring中搞 ...
- springMVC请求注解@RequestMapping各个属性值
最近遇到了一个采用fastJson传输数据的方式,搞了半天,总是感觉模糊,觉得自己有必要在这里做一个系统的总结,今天先从@RequestMapping的属性开始,采用REST 风格的 URL 请求,R ...
- 前后端分离——token超时刷新策略
前言 记录一下前后端分离下————token超时刷新策略! 需求场景 昨天发了一篇记录 前后端分离应用——用户信息传递 中介绍了token认证机制,跟几位群友讨论了下,有些同学有这么一个疑惑:toke ...
- JDK下载与安装、 Eclipse下载与使用的总结心得_20173311118_牛明旺
一.JDK下载与安装心得: ① 从官网http://www.oracl.com/technetwork/java上下载JDK,注意一定要同意该网站上的协议,否则下载不了(即点击“Accept Lic ...
- 关于iframe切换的问题
定位不到元素的另一种问题是有这种iframe,所有我们需要切换到该页面中去 1.首先找到这个iframe的位置,像上图有id属性我们直接 iframe = driver.find_element_b ...
- kafka补充
 
- [BZOJ 5323][Jxoi2018]游戏
传送门 \(\color{green}{solution}\) 它每次感染的人是它的倍数,那么我们只需要找出那些除了自己以外在\(l\), \(r\)内没有别的数是 它的约数的数,在这里称其为关键数. ...
- Go语言指针
指针简介 (Pointer)是编程语言中的一个对象,利用地址,它的值直接指向(points to)存在电脑存储器中另一个地方的值.由于通过地址能找到所需的变量单元,可以说,地址指向该变量单元.因此,将 ...
- 区间DP的学习(持续更新)
例题: 1.Multiplication Puzzle 原题地址:http://poj.org/problem?id=1651 2.Dire Wolf 原题地址:http://acm.split.hd ...