纯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 相关文章推荐
关于js类的定义
Jun 28 Javascript
js 获取元素下面所有li的两种方法
Apr 14 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 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 数组基础知识小结
2010/08/20 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
windows 下python+numpy安装实用教程
2017/12/23 Python
Python返回数组/List长度的实例
2018/06/23 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
《童年》教学反思
2014/02/18 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
四查四看整改措施
2014/09/19 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书