纯js实现画一棵树的示例
更新时间：2017年09月05日 08:53:01 作者：雾行者
下面小编就为大家带来一篇纯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实现画一棵树的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
近几日使用uni-app开发移动应用APP遇到了个不常见的需求,下面这篇文章主要给大家介绍了关于uniapp自定义应用退出执行内容的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
今天闲来无事用js写了个数学绘图包，还不算完整，不过总出现了雏形。2009-04-04
距离某一时间点时间是多少，在本文将为大家介绍下js中是如何实现的，感兴趣的朋友不要错过2013-10-10
下面小编就为大家带来一篇JS 获取HTML标签内的子节点的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
这篇文章主要为大家详细介绍了微信小程序自定义模态框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了JS实现闭包中的沙箱模式,结合实例形式分析了闭包模块化实现沙箱模式的原理、步骤与相关操作技巧,需要的朋友可以参考下2017-09-09
这篇文章主要为大家详细介绍了JavaScript表单验证示例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
vue.config.js是一个可选的配置文件,可以在其中定义一些自定义的配置选项,本文就来介绍一下如何配置,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
这篇文章主要介绍了使用pkg打包ThinkJS项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
javascript设计模式 – 策略模式原理与用法实例分析
这篇文章主要介绍了javascript设计模式 – 策略模式,结合实例形式分析了javascript策略模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下2020-04-04
最新评论