纯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方法和技巧大全
Dec 27 Javascript
JS高级笔记
Jul 13 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
小试小程序云开发(小结)
Jun 06 Javascript
React 实现车牌键盘的示例代码
Dec 20 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 的 __FILE__ 常量
2007/01/15 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
菜单效果
2006/10/14 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
python 美化输出信息的实例
2018/10/15 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
盛大二次面试题
2016/11/18 面试题
个人简历的自荐信
2013/10/23 职场文书
加拿大探亲邀请信
2014/01/28 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
毕业生就业协议书
2014/04/11 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
大二学年个人总结
2015/03/03 职场文书
端午节寄语2015
2015/03/23 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
Python 中 Shutil 模块详情
2021/11/11 Python
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏