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

JavaScript图形实例：圆形图案

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

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图形实例：纺织物图案

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

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图形实例：迭代函数系统生成图形

迭代函数系统(Iterated Function System,IFS)可以用来创建分形图案,它是分形理论的重要分支,也是分形图形处理中最富生命力而且最具有广阔应用前景的领域之一.这一工作最早可以追溯到Hutchinson于1981年对自相似集的研究.美国科学家M.F.Barnsley于1985年发展了这一分形构型系统,并命名为迭代函数系统(Iterated Function System,IFS),后来又由Stephen Demko等人将其公式化,并引入到图像合成领域中.IFS将待生成的图像看…

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="300" height="300" style="border:3px double #996633;"> </canvas> 再在定义的这块300*300的canvas(画布)上面用二重循环绘制布纹图案,绘制时,对每个像素点通过椭圆方程求值的方式决定该点的颜色. 可编写如下的HTML代码.…