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

【JavaScript图形实例：图形的扇形变换和环形变换】的更多相关文章

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图形实例：再谈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图形实例：Canvas API

1．Canvas概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap). 要使用HTML5在浏览器窗口中绘制图形,首先需要在HTML文档中新建一个canvas网页元素.一般方法如下: <canvas id="myCanvas" width="400" height="300"> 您的浏览器不支持canvas! </canvas> 上…

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图形实例：随机SierPinski三角形

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

JavaScript动画实例：李萨如曲线

在“JavaScript图形实例:阿基米德螺线”和“JavaScript图形实例:曲线方程”中,我们学习了利用曲线的方程绘制曲线的方法.如果想看看曲线是怎样绘制出来的,怎么办呢?编写简单的动画,就可以展示指定曲线的绘制过程. 1．李萨如曲线设定李萨如曲线的坐标方程为: X=SIN(2θ) Y=SIN(3θ) (0≤θ≤2π) 将0~2π区间等分512段,取θ的初始值π/256,按曲线方程求得坐标值(x,y),并在当前坐标处通过绘制一个实心圆的方式描点.之后每隔0.02秒,将θ的初始值加…

JavaScript动画实例：递归分形图动态展示

在“JavaScript图形实例:SierPinski三角形” 和“JavaScript图形实例:Levy曲线及其变形”等文章中我们介绍了通过递归生成分形图形的方法.我们可以将绘制的分形图形每隔一定的时间间隔后,增加递归深度重新绘制一次,这样就可以得到分形图形的动态生成效果. 1．SierPinski垫片递归深度depth从1开始,将递归绘制的SierPinski垫片每隔1秒后增加递归深度(depth++),重新绘制一遍,得到SierPinski垫片的动态生成动画效果. 编写如下的HTML代码…

JavaScript动画实例：曲线的绘制

在“JavaScript图形实例:曲线方程”一文中,我们给出了15个曲线方程绘制图形的实例.这些曲线都是根据其曲线方程,在[0,2π]区间取一系列角度值,根据给定角度值计算对应的各点坐标,然后在计算出的坐标位置描点,从而绘制出曲线. 我们可以将曲线的绘制过程动态展示出来. 例如,对于星形线的绘制,编写如下的HTML代码. <!DOCTYPE> <html> <head> <title>星形线的绘制</title> </head> &l…

JavaScript小实例：拖拽应用（二）

经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: 这个是在万网的注册页中所截的图,大概的效果就是,当拖动那个拖拽框时,如果拖拽框没有拖到最右边,则拖拽框会移动到初始位置,如果拖动到最右边,则拖拽框显示为对勾,中间的文字也变了,但是我试了一下,他的验证码的框没有出来,不知道是改了还是怎么的,我没有继续点击确定往下进行,那不是我们要讲的重点,我就在他的…

javascript小实例，拖拽应用（一）

前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚动条,也可以理解为表单中的数量选择控件,也可以理解为进度条,等等,反正你可以改成很多你想要的效果,废话不多说,我们来看看这个是怎么做的吧! 想了想,感觉原理就不用说了吧,我在拖拽效果中就已经说的很清楚了,不清楚的同学可以出门左转,查看 javascript小实例,PC网页里的拖拽 ,我就直接贴代码了…