纯js实现画一棵树的示例
时间:2019-04-01
本文章向大家介绍纯js实现画一棵树的示例,主要包括纯js实现画一棵树的示例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
用纯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实现画一棵树的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- WooCommerce 结算页面自定义(删除/添加)表单元素
- Waves:类Material Design 的圆形波浪(涟漪)点击特效插件
- 让WooCommerce 中文网关支持PayPal 并自动按汇率进行转换
- Sass 基础(八)
- 在WordPress 的文章或页面中运行PHP 代码
- Sass 基础(七)
- Sass 基础(六)
- Sass 基础(五)
- [信息安全] 1.密码工具箱
- [解读REST] 2.REST用来干什么的?
- [解读REST] 5.Web的需求 & 推导REST
- [解读REST] 1.REST的起源
- [解读REST] 3.基于网络应用的架构
- [解读REST] 4.基于网络应用的架构风格
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法