《JavaScript高效图形编程(修订版)》——6.9 画布和递归绘图

简介: 下面我们将尝试用更有趣的东西,具体说是用一点三角函数和一点随机元素,来代替简单的递归递减。图6-14显示了递归调用简单的画布画线命令得出的树。递归图形函数的一个显著特点是看起来比较自然,我们可以看到分支的末梢非常精细。

本节书摘来自异步社区《JavaScript高效图形编程(修订版)》一书中的第6章,第6.9节,作者:【美】Raffaele Cecco著,更多章节内容可以访问云栖社区“异步社区”公众号查看

6.9 画布和递归绘图

立即模式绘图的好处之一是不需要创建和操作什么中间数据结构。在立即模式绘图中,你可以立即忘记刚刚执行的绘图命令,或者叠加多个绘图命令。这对在画布中使用高密度、递归的绘图函数(如不规则碎片形)特别有用。递归函数指的是调用自己的函数。通过将函数的上次结果返回给函数本身,我们创建了软件的反馈环路。下面的例子递归调用自己10次:

screenshot

这个例子虽然很简单,但它演示了递归函数的两个重要方面:

  • 在递归函数内修改值,然后将这个值反馈回去。
  • 我们需要一个条件语句来跳出死循环。

下面我们将尝试用更有趣的东西,具体说是用一点三角函数和一点随机元素,来代替简单的递归递减。图6-14显示了递归调用简单的画布画线命令得出的树。递归图形函数的一个显著特点是看起来比较自然,我们可以看到分支的末梢非常精细。这是由于前面提过的分数像素级抗锯齿技术。

screenshot

尽管外观复杂、细节丰富,实现代码却非常简单:

screenshot
screenshot

6.9.1 画布树的页面布局
修改drawTree()的初始值,你会发现初始值的微小变化可以给出非常不同的结果。不推荐使用远超过12的depth值(倒数第二个参数),除非你非常有耐心!

screenshot

/这里是drawTree()函数的代码/

相关文章
|
3月前
|
JSON JavaScript 前端开发
js树形菜单 如何用递归制作一个简单的树形菜单
js树形菜单 如何用递归制作一个简单的树形菜单
40 0
|
3月前
|
JavaScript 数据可视化
基于fabric.js的图片编辑器, 画布背景实现原理
基于vue3 + fabric.js + vite + element-plus + typescript等技术,画布背景原理分析
基于fabric.js的图片编辑器, 画布背景实现原理
|
4月前
|
JSON JavaScript 数据格式
js递归树形菜单
js递归树形菜单
|
7月前
|
JSON JavaScript 数据格式
js递归树形菜单
js递归树形菜单
|
10天前
|
JavaScript
node.js递归拼凑成树形结构
node.js递归拼凑成树形结构
10 0
|
1月前
|
JavaScript 前端开发
JavaScript递归的理解(最详细)
JavaScript递归的理解(最详细)
|
3月前
|
Rust 前端开发 JavaScript
【面试题】JavaScript中递归的理解
【面试题】JavaScript中递归的理解
|
4月前
|
JavaScript 前端开发 数据处理
【JavaScript 数据处理-番外篇】手写了几个数据处理,都是用的递归
【JavaScript 数据处理-番外篇】手写了几个数据处理,都是用的递归
|
4月前
|
JavaScript 前端开发
【JavaScript 递归】判断两个对象的键值是否完全一致,支持深层次查询,教你玩转JavaScript脚本语言
【JavaScript 递归】判断两个对象的键值是否完全一致,支持深层次查询,教你玩转JavaScript脚本语言
|
4月前
|
JSON JavaScript 数据格式
JS递归树形菜单
JS递归树形菜单
17 1