纯js实现画一棵树的示例


Posted in Javascript onSeptember 05, 2017

用纯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实现画一棵树的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
js对象内部访问this修饰的成员函数示例
Apr 27 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
AngularJS实现页面定时刷新
Mar 14 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 #Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 #Javascript
对于Javascript 执行上下文的全面了解
Sep 05 #Javascript
JS一个简单的注册页面实例
Sep 05 #Javascript
基于react组件之间的参数传递(详解)
Sep 05 #Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 #Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 #Javascript
You might like
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
php简单实现数组分页的方法
2016/04/30 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
深入浅析javascript继承体系
2017/10/23 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
基于python实现高速视频传输程序
2019/05/05 Python
python实现QQ批量登录功能
2019/06/19 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
汉森批发:Hansen Wholesale
2018/05/24 全球购物
业务主管岗位职责范本
2013/12/25 职场文书
禁毒宣传标语
2014/06/19 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
外贸英文求职信范文
2015/03/19 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript