摘要：编写如下的函数： function drawHexagon(x,y,L) { ctx.beginPath(); ctx.moveTo(x-sqrt3/2*L,y-L/2); ctx.lineTo(x-sqrt3/2*L,y+L/2); ctx.lineTo(x,y+L); ctx.lineTo(x+
阅读全文
摘要：H分形是由一个字母H演化出迷宫一样场景的分形图案，其构造过程是：取一个中心点（x,y），以此中心点绘制一条长为L的水平直线和两条长为H的竖直直线，构成一个字母“H”的形状；再以两条竖直直线的上下共4个端点为中心点，分别绘制一条长为L/2的水平直线和两条长为H/2的竖直直线；重复以上操作直至达到要求的
阅读全文
摘要：德国数学家David Hilbert在1891年构造了一种曲线，首先把一个正方形等分成四个小正方形，依次从西北角的正方形中心出发往南到西南正方形中心，再往东到东南角的正方形中心，再往北到东北角正方形中心，这是一次迭代；如果对四个小正方形继续上述过程，往下划分，反复进行，最终就得到一条可以填满整个正方
阅读全文
摘要：在“JavaScript图形实例：迭代函数系统生成图形”一文中，我们介绍了采用迭代函数系统（Iterated Function System，IFS）创建分形图案的一些实例。在该文中，仿射变换函数W的一般形式为 X1=a*X0 + b*Y0 + e Y1=c*X0 + d*Y0 + f 给定不同的I
阅读全文
摘要：在“JavaScript图形实例：SierPinski三角形” 和“JavaScript图形实例：Levy曲线及其变形”等文章中我们介绍了通过递归生成分形图形的方法。我们可以将绘制的分形图形每隔一定的时间间隔后，增加递归深度重新绘制一次，这样就可以得到分形图形的动态生成效果。 1．SierPinsk
阅读全文
摘要：迭代函数系统（Iterated Function System，IFS）可以用来创建分形图案，它是分形理论的重要分支，也是分形图形处理中最富生命力而且最具有广阔应用前景的领域之一。这一工作最早可以追溯到Hutchinson于1981年对自相似集的研究。美国科学家M.F.Barnsley于1985年发
阅读全文
摘要：1．SierPinski三角形 Sierpinski三角形是一种分形，由波兰数学家谢尔宾斯基在1915年提出，它是一种典型的自相似集。其生成过程为： （1）取一个三角形（多数使用等边三角形）； （2）沿三边中点连线，将它分成四个小三角形； （3）对上、左、右这三个小三角形重复这一过程。 SierPi
阅读全文
摘要：Levy曲线是将一条线段不停地分形成两条长度相等且相互垂直的线段而生成的。Levy分形的最后很像一个英文字母C，所以也称它为C曲线。 Levy曲线的生成示意如图1所示。 图1 Levy曲线的生成 1．Levy曲线 Levy曲线采用递归过程易于实现，编写如下的HTML代码。 <!DOCTYPE htm
阅读全文
摘要：Koch曲线的构造过程是：取一条长度为L0的直线段，将其三等分，保留两端的线段，将中间的一段改换成夹角为60度的两个等长直线；再将长度为L0/3的4个直线段分别进行三等分，并将它们中间的一段均改换成夹角为60度的两段长为L0/9的直线段；重复以上操作直至无穷，可得以一条具有自相似结构的折线，如图1所
阅读全文
摘要：观察自然界中树的分叉，一根主干生长出两个侧干，每个侧干又长出两个侧干，以此类推，便生长出疏密有致的结构。这样的生长结构，使用递归算法可以模拟出来。 例如，分叉的侧干按45°的偏转角度进行生长的递归示意图如图1所示。 图1 生成树的递归示意图 按照树分叉生长侧干的递归思想，编写如下的HTML代码。 <
阅读全文
摘要：黄金螺旋线是根据斐波那契数列画出来的螺旋曲线。自然界中存在许多黄金螺旋线的图案，是自然界最完美的经典黄金比例。例如，如图1所示的海螺身上的曲线，图2所示的漩涡，图3所示的人耳。 图1 海螺 图2 漩涡 图3 人耳 又如，名画蒙娜丽莎的微笑整个画面所呈现的数学美，如图4所示。 图4 蒙娜丽莎的微笑 黄
阅读全文
摘要：1．窗花基本框线 设定曲线的坐标方程为： n=25; r=100; x=r/n*cos(5*θ)+r*cos(θ); y=r/n*sin(5*θ)+r*sin(θ); （0≤θ≤2π） 编写如下的HTML代码。 <!DOCTYPE html> <head> <title>窗花基本框线</title>
阅读全文
摘要：1．长短瓣相间的蝴蝶结 设定曲线的坐标方程为： b=r*(1+cos(n*θ)/4)*(1+sin(2*n*θ)); x1=b*cos(θ); x2=b*cos(θ+π/8); y1=b*Math.sin(θ); y2=b*Math.sin(θ+π/8); （0≤θ≤2π，2≤n≤5） 在0~2π区
阅读全文
摘要：1．星形条纹图案 星形线的笛卡尔坐标方程式为： x=r*cos(θ)^3 y=r*sin(θ)^3 （0≤θ≤2π） 圆的笛卡尔坐标方程式为： x=r*cos(θ) y=r*sin(θ) （0≤θ≤2π） 在星形线中绘制一个内接圆，再在内接圆中绘制一个内接星形线。编写如下的HTML代码。 <!DOC
阅读全文
摘要：1．波形图案 采用正弦函数可以绘制正弦波形图案。编写如下的HTML代码。 <!DOCTYPE html> <head> <title>波形图案</title> <script type="text/javascript"> function draw(id) { var canvas=documen
阅读全文
摘要：描述由一个图形变化为另一个图形过程中的各个中间图形，称为渐变图形。可以利用插值算法求得各个渐变图形。 设在源图形和目标图形上各取M个对应坐标点，并分别保存到数组中，源图形用数组SX[M]和SY[M]保存M个坐标点（sx，sy），目标图形用数组DX[M]和DY[M]保存M个坐标点（dx，dy）。若需生
阅读全文
摘要：在“JavaScript图形实例：曲线方程”一文中，我们给出了15个曲线方程绘制图形的实例。在本文中，我们继续讨论一下曲线方程。在本文中，我们讨论的方法时，先给出一个绘制特定图案的曲线方程，然后将方程中的一些取值参数化，然后看看这些参数取不同值时会绘制出怎样的图形，从而通过试探加猜测的方式找出一些绘
阅读全文
摘要：在HTML5 Canvas画布中，我们可以根据曲线的方程绘制出曲线。例如，在笛卡尔坐标系中，圆的方程为： x=r*cos(θ) y=r*sin(θ) （0≤θ≤2π） 编写如下的HTML代码。 <!DOCTYPE html> <head> <title>圆</title> <script type=
阅读全文
摘要：1．小星星 设有如下的曲线参数方程： N=5 x = r*sin(nθ)*cos(θ) y = r*sin(nθ)*sin(θ) （0≤θ≤2π） 用循环依次取θ值为0~2π（每次增量为π/64），计算出X和Y,在canvas画布中将坐标点（X,Y）用线连起来，可绘制出一个一个5瓣花卉图案。 编写如
阅读全文
摘要：在Canvas API中，上下文CanvasRenderingContext2D对象提供了一个绘制圆与圆弧的方法，其基本格式为： void arc(in float x, in float y, in float radius, in float startAngle, in float endAn
阅读全文
