纯js实现画一棵树的示例

2024-09-28 17:57:39

用纯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实现画一棵树的示例

用纯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;
如何使用 vue + d3 画一棵树

github pages vue 和 d3 的角色画图可分为两步: 元素坐标计算数据绑定坐标计算只需要一些 api,本文使用 d3. 数据绑定既可以借助 d3,也可以使用 vue.d3 通过操作 dom 实现,有点像 jQuery,d3 针对数据和 dom 的状态提出了三个概念:Update.Enter.Exit,感兴趣的可以看官网.本文使用 vue 做数据绑定总结:使用 d3 提供的 api 计算元素坐标,使用 vue 进行数据绑定坐标计算一棵树由节点和连接构成,只需要计算出这两种
利用纯JS实现像素逐渐显示的方法示例

前言对于新手的我,以前从来没有做过对像素进行操作的实例.于是把资料书找了出来,实现了这个功能,比较简单,大神勿喷.下面是效果图,因为重在思路,效果就简陋一些. 实现思路其实就是简单的用JS实现将左上角的矩形随时间图像逐渐显示在它的右下方. 首先,先把思路架构起来,因为对像素操作,所以需要用到canvas. 然后,我们需要画一个矩形,并且需要获取到它的每一个像素的值,即每一个像素的4要素,rgba.(方法getImageData,4个参数,前两个坐标,X和Y,后两个是长和宽) 最后,用一个定
优雅的使用javascript递归画一棵结构树示例代码

递归和尾递归简单的说,递归就是函数自己调用自己,它做为一种算法在程序设计语言中广泛应用.其核心思想是把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解.一般来说,递归需要有边界条件.递归前进阶段和递归返回阶段.当边界条件不满足时,递归前进:当边界条件满足时,递归返回. 但是作为一个合格的程序员,我们也因该知道,递归算法相对常用的算法如普通循环等,运行效率较低.因此,应该尽量避免使用递归,除非没有更好的算法或者某种特定情况,递归更为适合的时候.在递归调用的过程当中系统为每一层的
纯js网页画板(Graphics)类简介及实现代码

今天需要在网页上画一个图谱,想到用JS,经过学习,和网上搜索,经过整理优化得到下面代码,注意不是用HTML5的canvas,而是用的纯js 复制代码代码如下: /* 以下画点,画线,画圆的方法,都不是用HTML5的canvas,而是用的纯js 用到了一些数学的三角函数方法以下代码是课堂随机写出,没有做更多优化 */ /* 面向对象封装,添加绘制矩形进一步优化代码 */ var Graphics = function(divId, color){ this.divId = divId; th
Python+Turtle动态绘制一棵树实例分享

本文实例主要是对turtle的使用,实现Python+turtle动态绘制一棵树的实例,具体代码: # drawtree.py from turtle import Turtle, mainloop def tree(plist, l, a, f): """ plist is list of pens l is length of branch a is half of the angle between 2 branches f is factor by which bra
纯JS实现五子棋游戏兼容各浏览器(附源码)

纯JS五子棋(各浏览器兼容) 效果图: 代码下载 HTML代码复制代码代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>五子棋</title> <link rel="stylesheet" type="text/
利用原生JS自动生成文章标题树的实例

实现原理很简单,就是循环文章模块,并抽取其中的h2.h3标签,将其中的内容赋予给新建的title树. 代码如下: HTML代码: <div class="contextBox"> <div id="article"> <h2>二级标题</h2> <h3>三级标题</h3> <p>hello hello hello hello hello hello hello hello hello
纯js实现html转pdf的简单实例(推荐)

项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格.svg图片和样式. 简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf. 咋不上天呢-- 查了一下,能够实现html转pdf的方法还是挺多的,大概有以下几种: 1.大部分浏览器就有这个功能.然而我们客户要的可不是这个,人家要的是能够在系统中主动触发的导出为pdf功能,所以这种方案pass. 2.利用第三方工具.我找到了一种利用wkhtmltopdf这种工具来导出的方案,自己在我们的项目中试
纯js实现无限空间大小的本地存储

好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了, 项目地址https://github.com/xueduany/localstore, demo见http://xueduany.github.io/localstore/, 下面给大家简单说说大概原理,具体细节和异常处理后面有机会在单独说先说下突破本地localStorage的原理,官方原话是这么说的http://www.w3.org/TR/2013/PR-webstor

纯js实现画一棵树的示例

相关推荐

随机推荐