《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()函数的代码/

相关文章
|
7月前
|
JSON JavaScript 前端开发
js树形菜单 如何用递归制作一个简单的树形菜单
js树形菜单 如何用递归制作一个简单的树形菜单
100 0
|
7月前
|
存储 JavaScript 前端开发
JavaScript中的递归函数
JavaScript中的递归函数
58 0
|
7月前
|
前端开发 JavaScript
验证码(原生js加canvas绘图)
验证码(原生js加canvas绘图)
40 0
|
2月前
|
前端开发 JavaScript
JavaScript递归菜单栏
JavaScript递归菜单栏
JavaScript递归菜单栏
|
5月前
|
移动开发 前端开发 JavaScript
使用JavaScript和Canvas进行绘图
Canvas是HTML5的绘图工具,借助JavaScript实现网页上的图形、图像及动画创作。通过Canvas元素和2D渲染上下文,开发者能绘制图形、处理图像、制作动画,甚至用于游戏开发。基本步骤包括获取Canvas元素、设置绘图属性、绘制形状、处理图像以及实现动画。同时,注意性能优化,如减少不必要的重绘和使用Web Workers。Canvas结合WebGL还能实现3D效果,与Web Audio API结合则能做音频可视化。分享你的Canvas经验,探讨更多创意应用!
47 0
|
3月前
|
JSON JavaScript 前端开发
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
|
4月前
|
缓存 JavaScript 前端开发
|
5月前
|
数据采集 缓存 JavaScript
JavaScript递归函数的设计与优化
JavaScript递归函数的设计与优化
|
6月前
|
JavaScript 前端开发 测试技术
了解JS递归
了解JS递归
39 1
|
6月前
|
JavaScript Serverless
JS实现递归功能
JS实现递归功能