纯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格式化数字的函数代码
Nov 30 Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
JS返回顶部实例代码
Aug 09 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
vue项目中导入swiper插件的方法
Jan 30 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 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
浅析php适配器模式(Adapter)
2014/11/25 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
ext 代码生成器
2009/08/07 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
python支持多线程的爬虫实例
2019/12/21 Python
幼儿园庆六一活动方案
2014/03/06 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
2019销售早会主持词
2019/06/27 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS
python数字图像处理实现图像的形变与缩放
2022/06/28 Python