【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动画实例：李萨如曲线

在“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网页里的拖拽 ,我就直接贴代码了…

JavaScript 小实例 - 表单输入内容检测，对页面的增删改

JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页面写入数据 2.删除页面数据 + 删除提示[确实]才删除 3.获取表单输入的内容,并简单验证 4.打开一个新的窗口 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&…

10种JavaScript特效实例让你的网站更吸引人

我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预置好的脚本或那种从头开始开发的创建者.这篇文章适合那些打算提高工作效率或不愿意从头开发脚本的人阅读. 您还可以参考以下JavaScript/Ajax相关教程及资源:<10个非常棒的Ajax及Javascript实例资源网站><12种Javascript解决常见浏览器兼容问题的方法>&l…

JavaScript图形实例：图形的旋转变换

旋转变换:图形上的各点绕一固定点沿圆周路径作转动称为旋转变换.可用旋转角表示旋转量的大小. 旋转变换通常约定以逆时针方向为正方向.最简单的旋转变换是以坐标原点(0,0)为旋转中心,这时,平面上一点P(x,y) 旋转了θ之后,变成点P’(x,y) ,如图1所示. 图1 点P逆时针旋转 由三角关系可得: 平面上一点P(x,y)若按顺时针方向旋转了θ之后,变成点P’(x,y) ,如图2所示. 图2 点P顺时针旋转 由三角关系可得: 1．三角形旋转 先绘制一个三角形,然后将该三角形依次顺时针旋转45°,…

JavaScript图形实例：合成花卉图

我们知道在直角坐标系中,圆的方程可描述为: X=R*COS(α) Y=R*SIN(α) 用循环依次取α值为0~2π,计算出X和Y,在canvas画布中将坐标点(X,Y)用线连起来,可绘制出一个圆.编写HTML文件内容如下: <!DOCTYPE html> <head> <title>圆的绘制</title> <script type="text/javascript"> function draw(id) { var canv…

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  扇形变换 将如图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．圆内螺线的形成方式 在固定的大圆中内切一个运动的小圆,在小圆滚动的过程中,其上一个定点P所形成的轨迹,即为圆内螺线.点P会随着两圆半径比值的不同而出现不同轨迹.例如,当小圆半径等于大圆的四分之一时,形成的轨迹则是星形线,如图1所…

JavaScript图形实例：正弦曲线

正弦曲线的坐标方程为: Y=A*SIN(X)    (A为振幅) 1．正弦曲线 在弧度为0~4π的正弦曲线上取360个点,将这些点用线连接起来,可以绘制出正弦曲线.编写如下的HTML代码. <!DOCTYPE html> <head> <title>正弦曲线的绘制</title> <script type="text/javascript"> function draw(id) { var canvas=document.ge…

JavaScript图形实例：正多边形

圆心位于坐标原点,半径为R的圆的参数方程为 X=R*COS(θ) Y=R*SIN(θ) 在圆上取N个等分点,将这N个点首尾连接N条边,可以得到一个正N边形. 1．正多边形阵列 构造一个8行8列的正N(N为3~10)边形阵列.编写如下的HTML代码. <!DOCTYPE html> <head> <title>正多边形阵列</title> <script type="text/javascript"> function draw…

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图形实例：图形放大镜效果

1. 基本四瓣花型图案 根据四瓣花卉线的参数方程: t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2); x=t*cos(θ)); y=t*sin(θ)); 编写如下的HTML文件. <!DOCTYPE html> <head> <title>基本的四瓣花型图案</title> <script type="text/javascript"> function draw(id) { var canvas=…

JavaScript图形实例：SierPinski三角形

1．SierPinski三角形 Sierpinski三角形是一种分形,由波兰数学家谢尔宾斯基在1915年提出,它是一种典型的自相似集.其生成过程为: (1)取一个三角形(多数使用等边三角形): (2)沿三边中点连线,将它分成四个小三角形: (3)对上.左.右这三个小三角形重复这一过程. SierPinski三角形的生成示意如图1所示. 图1  SierPinski三角形的生成 SierPinski三角形采用递归过程易于实现,编写如下的HTML代码. <!DOCTYPE html> <he…

JavaScript图形实例：迭代函数系统生成图形

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

JavaScript图形实例：Hilbert曲线

德国数学家David Hilbert在1891年构造了一种曲线,首先把一个正方形等分成四个小正方形,依次从西北角的正方形中心出发往南到西南正方形中心,再往东到东南角的正方形中心,再往北到东北角正方形中心,这是一次迭代:如果对四个小正方形继续上述过程,往下划分,反复进行,最终就得到一条可以填满整个正方形的曲线,这就是Hibert曲线.其生成过程如图1所示. 图1  Hilbert曲线的生成 Hilbert曲线可以采用递归过程实现,在递归处理时,连接中点的方式有4种,如图2所示. 图2  连接中心点…

JavaScript图形实例：Canvas API

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

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

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

JavaScript图形实例：阿基米德螺线

1．阿基米德螺线 阿基米德螺线亦称“等速螺线”.当一点P沿动射线OP以等速率运动的同时,该射线又以等角速度绕点O旋转,点P的轨迹称为“阿基米德螺线”. 阿基米德螺线的笛卡尔坐标方程式为: r=10*(1+t) x=r*cos(t * 360) y=r*sin(t *360) 编写如下的HTML代码. <!DOCTYPE html> <head> <title>阿基米德螺线</title> <script type="text/javascri…

JavaScript图形实例：五角星

1．五角星 在半径为80的圆周上取5个点,用这5个点依次首尾连接画5条线,可以绘制出一个五角星图案. 编写如下的HTML代码. <!DOCTYPE html> <head> <title>五角星(一)</title> <script type="text/javascript"> function draw(id) { var canvas=document.getElementById(id); if (canvas==nu…

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)用线连起来,可绘制出一个封闭曲线图形,可得到一个线团图案. 编写如下的HTML代码. <!DOCTYPE> <html> <head> <title>线团</title> </head> &l…

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．简单纺织物图案 先在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…