纯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 对象成员的可见性说明
Oct 16 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 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转成EXE文件
2006/10/09 PHP
php cookies中删除的一般赋值方法
2011/05/07 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
Django实现自定义404,500页面教程
2017/03/26 Python
Python实现通讯录功能
2018/02/22 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
python和JavaScript哪个容易上手
2020/06/23 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
企业申诉管理制度
2014/01/30 职场文书
大学军训感言800字
2014/02/27 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python