JavaScript图形实例：玩转正方形
摘要：在Canvas API中，上下文CanvasRenderingContext2D对象提供了一个与坐标旋转相关的方法： void rotate(in float angle); // 按给定的弧度顺时针旋转angle 利用rotate（）方法可以很方便地将绘制的图形旋转。下面我们通过对正方形进行旋转变
阅读全文
posted @ 2020-06-25 08:29
随笔分类 - JavaScript程序设计
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
JavaScript图形实例：圆内螺线
摘要：数学中有各式各样富含诗意的曲线，螺旋线就是其中比较特别的一类。螺旋线这个名词来源于希腊文，它的原意是“旋卷”或“缠卷”。例如，平面螺旋线便是以一个固定点开始向外逐圈旋绕而形成的曲线。 阿基米德螺线和黄金螺旋线就是典型的螺旋线。下面我们探讨一种典型的螺旋线：圆内螺线。 1．圆内螺线的形成方式 在固定的
阅读全文
posted @ 2019-12-31 12:06
JavaScript图形实例：线段构图
摘要：在“JavaScript图形实例：四瓣花型图案”和“JavaScript图形实例：蝴蝶结图案”中，我们绘制图形时，主要采用的方法是先根据给定的曲线参数方程计算出两点坐标，然后将两点用线段连接起来，线段的集合会构成一幅幅精美的图形。下面我们继续给出一些用线段构造图形的实例，供大家欣赏和借鉴。 1．莫尔
阅读全文
posted @ 2019-12-28 16:15
JavaScript动画实例：李萨如曲线
摘要：在“JavaScript图形实例：阿基米德螺线”和“JavaScript图形实例：曲线方程”中，我们学习了利用曲线的方程绘制曲线的方法。如果想看看曲线是怎样绘制出来的，怎么办呢？编写简单的动画，就可以展示指定曲线的绘制过程。 1．李萨如曲线 设定李萨如曲线的坐标方程为： X=SIN(2θ) Y=SI
阅读全文
posted @ 2019-12-26 07:56
JavaScript图形实例：正弦曲线
摘要：正弦曲线的坐标方程为： Y=A*SIN(X) （A为振幅） 1．正弦曲线 在弧度为0~4π的正弦曲线上取360个点，将这些点用线连接起来，可以绘制出正弦曲线。编写如下的HTML代码。 <!DOCTYPE html> <head> <title>正弦曲线的绘制</title> <script type
阅读全文
posted @ 2019-12-24 16:47
JavaScript图形实例：正多边形
摘要：圆心位于坐标原点，半径为R的圆的参数方程为 X=R*COS(θ) Y=R*SIN(θ) 在圆上取N个等分点，将这N个点首尾连接N条边，可以得到一个正N边形。 1．正多边形阵列 构造一个8行8列的正N（N为3~10）边形阵列。编写如下的HTML代码。 <!DOCTYPE html> <head> <t
阅读全文
posted @ 2019-12-23 20:37
JavaScript图形实例：图形的平移和对称变换
摘要：1.1 六瓣花平移变换 平移变换是指图形从一个位置到另一个位置所作的直线移动。如果要把一个位于P（x,y）的点移到新位置P’(x’,y’)，如图1，则只要在原坐标上加上平移距离Tx和Ty即可。 即 x’=x+Tx y’=y+Ty 图1 点的平移 生成一个六瓣花型图案的基本数据，通过平移变换绘制8行8
阅读全文
posted @ 2019-12-23 17:05
JavaScript图形实例：图形的扇形变换和环形变换
摘要：1.1 扇形变换 将如图1所示的上边长方形的图形变换为下边的扇形图形的变换称为扇形变换。 设长方形图形中任一点P1(X1,Y1)变换为扇形图形上的点P2(X2,Y2)，长方形的长为X，扇形圆心坐标为（X0,Y0），扇形半径为L，扇形与X轴的最小夹角为B，扇形弧对应夹角为C，则点P2的坐标计算公式为：
阅读全文
posted @ 2019-12-23 12:12
JavaScript图形实例：图形的旋转变换
摘要：旋转变换：图形上的各点绕一固定点沿圆周路径作转动称为旋转变换。可用旋转角表示旋转量的大小。 旋转变换通常约定以逆时针方向为正方向。最简单的旋转变换是以坐标原点(0,0)为旋转中心，这时，平面上一点P(x,y) 旋转了θ之后，变成点P’(x,y) ，如图1所示。 图1 点P逆时针旋转 由三角关系可得：
阅读全文
posted @ 2019-12-22 19:44
JavaScript图形实例：五角星
摘要：1．五角星 在半径为80的圆周上取5个点，用这5个点依次首尾连接画5条线，可以绘制出一个五角星图案。 编写如下的HTML代码。 <!DOCTYPE html> <head> <title>五角星（一）</title> <script type="text/javascript"> function
阅读全文
posted @ 2019-12-21 07:47
JavaScript动画实例：旋转的圆球
摘要：1．绕椭圆轨道旋转的圆球 在Canvas画布中绘制一个椭圆，然后在椭圆上绘制一个用绿色填充的实心圆。之后每隔0.1秒刷新，重新绘制椭圆和实心圆，重新绘制时，实心圆的圆心坐标发生变化，但圆心坐标仍然位于椭圆曲线上。这样，可以得到绕椭圆轨道旋转的圆球动画。 编写如下的HTML代码。 <!DOCTYPE
阅读全文
posted @ 2019-12-20 20:14
JavaScript图形实例：七彩线团
摘要：1．线团图案 设立坐标计算公式为： X=R1*COS(3α)+R2*COS(14α)） Y=R1*SIN(3α)+R2 *SIN(14α)） 再用循环依次取α值为0~2π（每次增量为0.01），计算出X和Y,在canvas画布中将坐标点（X,Y）用线连起来，可绘制出一个封闭曲线图形，可得到一个线团图
阅读全文
posted @ 2019-12-20 18:03
JavaScript图形实例：圆形图案
摘要：在HTML5的Canvas 2D API中，可以调用arc方法绘制圆或圆弧。该方法调用格式为： context . arc(x, y, radius, startAngle, endAngle, anticlockwise) 其中：（x,y）为圆心坐标，radius为半径，startAngle和en
阅读全文
posted @ 2019-12-20 16:07
JavaScript图形实例：合成花卉图
摘要：我们知道在直角坐标系中，圆的方程可描述为： X=R*COS(α) Y=R*SIN(α) 用循环依次取α值为0~2π，计算出X和Y,在canvas画布中将坐标点（X,Y）用线连起来，可绘制出一个圆。编写HTML文件内容如下： <!DOCTYPE html> <head> <title>圆的绘制</ti
阅读全文
posted @ 2019-12-19 19:16
JavaScript图形实例：四瓣花型图案
摘要：设有坐标计算公式如下： X=L*(1+SIN(4α))*COS(α) Y=L*(1+SIN(4α))*SIN(α) 用循环依次取α值为0~2π，计算出X和Y,在canvas画布中对坐标位置（X,Y）描点，可绘制出一个曲线图形。编写HTML文件内容如下： <!DOCTYPE html> <head>
阅读全文
posted @ 2019-12-19 06:46
JavaScript图形实例：纺织物图案
摘要：1．简单纺织物图案 先在HTML页面中设置一个画布。 <canvas id="myCanvas" width="360" height="240"> </canvas> 再在定义的这块360*240的canvas（画布）上面用二重循环绘制纺织物图案。 绘制图案的基本思想是：将画布分成6行8列的子块，
阅读全文
posted @ 2019-12-18 18:51
JavaScript图形实例：布纹图案
摘要：1．椭圆型布纹图案 先在HTML页面中设置一个画布。 <canvas id="myCanvas" width="300" height="300" style="border:3px double #996633;"> </canvas> 再在定义的这块300*300的canvas（画布）上面用二重
阅读全文
posted @ 2019-12-18 17:16
