aTeacher - 博客园

JavaScript图形实例：SierPinski三角形

摘要： 1．SierPinski三角形 Sierpinski三角形是一种分形，由波兰数学家谢尔宾斯基在1915年提出，它是一种典型的自相似集。其生成过程为：（1）取一个三角形（多数使用等边三角形）；（2）沿三边中点连线，将它分成四个小三角形；（3）对上、左、右这三个小三角形重复这一过程。 SierPi 阅读全文

posted @ 2020-07-04 07:59 aTeacher 阅读(902) 评论(0) 推荐(0) 编辑

JavaScript图形实例：Levy曲线及其变形

摘要： Levy曲线是将一条线段不停地分形成两条长度相等且相互垂直的线段而生成的。Levy分形的最后很像一个英文字母C，所以也称它为C曲线。 Levy曲线的生成示意如图1所示。图1 Levy曲线的生成 1．Levy曲线 Levy曲线采用递归过程易于实现，编写如下的HTML代码。 <!DOCTYPE htm 阅读全文

posted @ 2020-07-03 11:47 aTeacher 阅读(700) 评论(0) 推荐(0) 编辑

JavaScript图形实例：Koch曲线

摘要： Koch曲线的构造过程是：取一条长度为L0的直线段，将其三等分，保留两端的线段，将中间的一段改换成夹角为60度的两个等长直线；再将长度为L0/3的4个直线段分别进行三等分，并将它们中间的一段均改换成夹角为60度的两段长为L0/9的直线段；重复以上操作直至无穷，可得以一条具有自相似结构的折线，如图1所阅读全文

posted @ 2020-07-02 19:40 aTeacher 阅读(757) 评论(0) 推荐(0) 编辑

JavaScript图形实例：递归生成树

摘要：观察自然界中树的分叉，一根主干生长出两个侧干，每个侧干又长出两个侧干，以此类推，便生长出疏密有致的结构。这样的生长结构，使用递归算法可以模拟出来。例如，分叉的侧干按45°的偏转角度进行生长的递归示意图如图1所示。图1 生成树的递归示意图按照树分叉生长侧干的递归思想，编写如下的HTML代码。 < 阅读全文

posted @ 2020-07-01 20:43 aTeacher 阅读(1668) 评论(0) 推荐(1) 编辑

JavaScript图形实例：黄金螺旋线

摘要：黄金螺旋线是根据斐波那契数列画出来的螺旋曲线。自然界中存在许多黄金螺旋线的图案，是自然界最完美的经典黄金比例。例如，如图1所示的海螺身上的曲线，图2所示的漩涡，图3所示的人耳。图1 海螺图2 漩涡图3 人耳又如，名画蒙娜丽莎的微笑整个画面所呈现的数学美，如图4所示。图4 蒙娜丽莎的微笑黄阅读全文

posted @ 2020-06-28 09:14 aTeacher 阅读(2494) 评论(0) 推荐(0) 编辑

JavaScript图形实例：窗花图案

摘要： 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> 阅读全文

posted @ 2020-06-28 09:07 aTeacher 阅读(457) 评论(0) 推荐(0) 编辑

JavaScript图形实例：蝴蝶结图案

摘要： 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π区阅读全文

posted @ 2020-06-28 09:04 aTeacher 阅读(624) 评论(0) 推荐(1) 编辑

JavaScript图形实例：星形条纹图案

摘要： 1．星形条纹图案星形线的笛卡尔坐标方程式为： x=r*cos(θ)^3 y=r*sin(θ)^3 （0≤θ≤2π）圆的笛卡尔坐标方程式为： x=r*cos(θ) y=r*sin(θ) （0≤θ≤2π）在星形线中绘制一个内接圆，再在内接圆中绘制一个内接星形线。编写如下的HTML代码。 <!DOC 阅读全文

posted @ 2020-06-28 08:59 aTeacher 阅读(1212) 评论(0) 推荐(0) 编辑

JavaScript图形实例：波形组合图案

摘要： 1．波形图案采用正弦函数可以绘制正弦波形图案。编写如下的HTML代码。 <!DOCTYPE html> <head> <title>波形图案</title> <script type="text/javascript"> function draw(id) { var canvas=documen 阅读全文

posted @ 2020-06-28 08:55 aTeacher 阅读(961) 评论(0) 推荐(0) 编辑

JavaScript图形实例：利用插值实现图像渐变

摘要：描述由一个图形变化为另一个图形过程中的各个中间图形，称为渐变图形。可以利用插值算法求得各个渐变图形。设在源图形和目标图形上各取M个对应坐标点，并分别保存到数组中，源图形用数组SX[M]和SY[M]保存M个坐标点（sx，sy），目标图形用数组DX[M]和DY[M]保存M个坐标点（dx，dy）。若需生阅读全文

posted @ 2020-06-26 09:08 aTeacher 阅读(612) 评论(0) 推荐(0) 编辑

I am a teacher!

导航

公告