纯js实现画一棵树的示例

来源：动视网责编：小采时间：2020-11-27 22:30:59

纯js实现画一棵树的示例

纯js实现画一棵树的示例:用纯js画一棵树。思路： 1、一棵树的图片，作为页面背景； 2、通过html5中的canvas画布进行遮罩； 3、定时每隔10ms，从下往上清除1px的遮罩； <!DOCTYPE html> <html> <head> <meta charset=UTF-8

推荐度：

点击下载本文 文档为doc格式

导读纯js实现画一棵树的示例:用纯js画一棵树。思路： 1、一棵树的图片，作为页面背景； 2、通过html5中的canvas画布进行遮罩； 3、定时每隔10ms，从下往上清除1px的遮罩； <!DOCTYPE html> <html> <head> <meta charset=UTF-8

用纯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实现画一棵树的示例

推荐度：

点击下载本文 文档为doc格式

标签： js 画一棵树 js画一棵树

热门焦点

纯js实现画一棵树的示例

纯js实现画一棵树的示例

纯js实现画一棵树的示例

最新推荐

猜你喜欢

热门推荐