JavaScript图形实例：圆形图案

【JavaScript图形实例：圆形图案】的更多相关文章

JavaScript图形实例：线段构图

在“JavaScript图形实例:四瓣花型图案”和“JavaScript图形实例:蝴蝶结图案”中,我们绘制图形时,主要采用的方法是先根据给定的曲线参数方程计算出两点坐标,然后将两点用线段连接起来,线段的集合会构成一幅幅精美的图形.下面我们继续给出一些用线段构造图形的实例,供大家欣赏和借鉴. 1．莫尔花纹图案设定曲线的坐标方程为: b=r*(1+ sin(2.5*θ)/2); x1=b*cos(θ); x2=b*cos(θ+π/4); y1=b* sin(θ); y2=b* sin(θ+π/4)…

JavaScript图形实例：再谈IFS生成图形

在“JavaScript图形实例:迭代函数系统生成图形”一文中,我们介绍了采用迭代函数系统(Iterated Function System,IFS)创建分形图案的一些实例.在该文中,仿射变换函数W的一般形式为 X1=a*X0 + b*Y0 + e Y1=c*X0 + d*Y0 + f 给定不同的IFS码,可以生成不同的图形. 实际上,仿射变换函数的形式还可以是 X1= a * X0*cos(c/180) - b * Y0*sin(d/180) + e Y1= a * X0*sin(c/180…

JavaScript图形实例：随机SierPinski三角形

在“JavaScript图形实例:SierPinski三角形”中,我们介绍了SierPinski三角形的基本绘制方法,在“JavaScript图形实例:迭代函数系统生成图形”一文中,介绍了采用IFS方法生成SierPinski三角形的方法.下面再介绍两种SierPinski三角形的构造方法,以扩展知识面. 1．随机点法采用随机点的方法可以得到SierPinski三角形.具体过程为: (1)任意取平面上三点A.B.C,组成一个三角形,并任意取三角形ABC内的一点P: (2)求出P和A.B.C三个…

JavaScript图形实例：图形的扇形变换和环形变换

1.1 扇形变换将如图1所示的上边长方形的图形变换为下边的扇形图形的变换称为扇形变换. 设长方形图形中任一点P1(X1,Y1)变换为扇形图形上的点P2(X2,Y2),长方形的长为X,扇形圆心坐标为(X0,Y0),扇形半径为L,扇形与X轴的最小夹角为B,扇形弧对应夹角为C,则点P2的坐标计算公式为: X2=(L+Y1)*COS(θ)+X0 Y2=-(L+Y1)*SIN(θ)+Y0 其中: θ=C*(X-X1)/X1+B 图1 扇形变换生成一个六瓣花型图案的基本数据,将长方形中的8个六瓣花型…

JavaScript图形实例：图形的平移和对称变换

1.1 六瓣花平移变换平移变换是指图形从一个位置到另一个位置所作的直线移动.如果要把一个位于P(x,y)的点移到新位置P’(x’,y’),如图1,则只要在原坐标上加上平移距离Tx和Ty即可. 即 x’=x+Tx y’=y+Ty 图1 点的平移生成一个六瓣花型图案的基本数据,通过平移变换绘制8行8列共64个六瓣花型的图案. 编写如下的HTML代码. <!DOCTYPE html> <head> <title>六瓣花平移变换</title> <s…

JavaScript图形实例：圆形图案

在HTML5的Canvas 2D API中,可以调用arc方法绘制圆或圆弧.该方法调用格式为: context . arc(x, y, radius, startAngle, endAngle, anticlockwise) 其中:(x,y)为圆心坐标,radius为半径,startAngle和endAngle给定圆弧的开始角度和结束角度,anticlockwise给定方向,为布尔类型,规定应该逆时针还是顺时针绘图.False = 顺时针,true = 逆时针. 例如,编写如下的HTML文件.…

JavaScript图形实例：四瓣花型图案

设有坐标计算公式如下: X=L*(1+SIN(4α))*COS(α) Y=L*(1+SIN(4α))*SIN(α) 用循环依次取α值为0~2π,计算出X和Y,在canvas画布中对坐标位置(X,Y)描点,可绘制出一个曲线图形.编写HTML文件内容如下: <!DOCTYPE html> <head> <title>曲线图形</title> <script type="text/javascript"> function draw…

JavaScript图形实例：平面镶嵌图案

用形状.大小完全相同的一种或几种平面图形进行拼接,彼此之间不留空隙.不重叠地铺成一片,就叫做这几种图形的平面镶嵌. 1．用一种多边形实现的平面镶嵌图案我们可以采用正三角形.正方形或正六边形实现平面镶嵌. (1)用正方形平铺. 用正方形进行平面镶嵌比较简单,编写如下的HTML代码. <!DOCTYPE html> <head> <title>正方形平面镶嵌图案</title> </head> <body> <canvas id=…

JavaScript图形实例：纺织物图案

1．简单纺织物图案先在HTML页面中设置一个画布. <canvas id="myCanvas" width="360" height="240"> </canvas> 再在定义的这块360*240的canvas(画布)上面用二重循环绘制纺织物图案. 绘制图案的基本思想是:将画布分成6行8列的子块,即每个子块的宽度为60,高度为30.在每个子块中按规律交错地绘制11条横线或21条竖线. 可编写如下的HTML代码. <…

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> <script type="text/javascript"> function draw(id) { var…