JavaScript图形实例：黄金螺旋线
摘要：黄金螺旋线是根据斐波那契数列画出来的螺旋曲线。自然界中存在许多黄金螺旋线的图案，是自然界最完美的经典黄金比例。例如，如图1所示的海螺身上的曲线，图2所示的漩涡，图3所示的人耳。 图1 海螺 图2 漩涡 图3 人耳 又如，名画蒙娜丽莎的微笑整个画面所呈现的数学美，如图4所示。 图4 蒙娜丽莎的微笑 黄
阅读全文
posted @ 2020-06-28 09:14
06 2020 档案
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
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
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
JavaScript图形实例：波形组合图案
摘要：1．波形图案 采用正弦函数可以绘制正弦波形图案。编写如下的HTML代码。 <!DOCTYPE html> <head> <title>波形图案</title> <script type="text/javascript"> function draw(id) { var canvas=documen
阅读全文
posted @ 2020-06-28 08:55
JavaScript图形实例：利用插值实现图像渐变
摘要：描述由一个图形变化为另一个图形过程中的各个中间图形，称为渐变图形。可以利用插值算法求得各个渐变图形。 设在源图形和目标图形上各取M个对应坐标点，并分别保存到数组中，源图形用数组SX[M]和SY[M]保存M个坐标点（sx，sy），目标图形用数组DX[M]和DY[M]保存M个坐标点（dx，dy）。若需生
阅读全文
posted @ 2020-06-26 09:08
JavaScript图形实例：再谈曲线方程
摘要：在“JavaScript图形实例：曲线方程”一文中，我们给出了15个曲线方程绘制图形的实例。在本文中，我们继续讨论一下曲线方程。在本文中，我们讨论的方法时，先给出一个绘制特定图案的曲线方程，然后将方程中的一些取值参数化，然后看看这些参数取不同值时会绘制出怎样的图形，从而通过试探加猜测的方式找出一些绘
阅读全文
posted @ 2020-06-26 08:58
JavaScript图形实例：曲线方程
摘要：在HTML5 Canvas画布中，我们可以根据曲线的方程绘制出曲线。例如，在笛卡尔坐标系中，圆的方程为： x=r*cos(θ) y=r*sin(θ) （0≤θ≤2π） 编写如下的HTML代码。 <!DOCTYPE html> <head> <title>圆</title> <script type=
阅读全文
posted @ 2020-06-26 08:52
JavaScript图形实例：从小星星到环带
摘要：1．小星星 设有如下的曲线参数方程： N=5 x = r*sin(nθ)*cos(θ) y = r*sin(nθ)*sin(θ) （0≤θ≤2π） 用循环依次取θ值为0~2π（每次增量为π/64），计算出X和Y,在canvas画布中将坐标点（X,Y）用线连起来，可绘制出一个一个5瓣花卉图案。 编写如
阅读全文
posted @ 2020-06-26 08:44
JavaScript图形实例：太极图
摘要：在Canvas API中，上下文CanvasRenderingContext2D对象提供了一个绘制圆与圆弧的方法，其基本格式为： void arc(in float x, in float y, in float radius, in float startAngle, in float endAn
阅读全文
posted @ 2020-06-25 08:32
JavaScript图形实例：玩转正方形
摘要：在Canvas API中，上下文CanvasRenderingContext2D对象提供了一个与坐标旋转相关的方法： void rotate(in float angle); // 按给定的弧度顺时针旋转angle 利用rotate（）方法可以很方便地将绘制的图形旋转。下面我们通过对正方形进行旋转变
阅读全文
posted @ 2020-06-25 08:29
JavaScript图形实例：模仿海龟作图
摘要：海龟作图最初源自20世纪60年代的Logo编程语言。在海龟作图中，我们可以编写指令让一个虚拟的海龟在屏幕上来回移动。这个海龟带着一只钢笔，我们可以让海龟无论移动到哪都使用这只钢笔来绘制线条。通过编写代码，以各种很酷的模式移动海龟，我们可以绘制出令人惊奇的图片。 例如，让海龟从某个点开始，向前走100
阅读全文
posted @ 2020-06-25 08:21
JavaScript动画实例：转呀转
摘要：在Canvas API中，上下文CanvasRenderingContext2D对象提供了一个与坐标旋转相关的方法： void rotate(in float angle); // 按给定的弧度顺时针旋转angle rotate（）方法旋转的中心始终是canvas的原点。如果要改变旋转中心，需要使用
阅读全文
posted @ 2020-06-25 08:12
JavaScript图形实例：图形放大镜效果
摘要：1. 基本四瓣花型图案 根据四瓣花卉线的参数方程： t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2); x=t*cos(θ)); y=t*sin(θ)); 编写如下的HTML文件。 <!DOCTYPE html> <head> <title>基本的四瓣花型图案</title
阅读全文
posted @ 2020-06-25 08:06
