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(id)
{
var canvas=document.getElementById(id);
if (canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,400);
context.fillStyle="yellow";
context.strokeStyle="red";
context.lineWidth=1;
context.beginPath();
for (px=30;px<390;px+=45)
for (py=30;py<390;py+=45)
{
n=((px-30)/45+(py-30)/45)%8+3;
for (i=0;i<=n;i++)
{
x1=20*Math.cos(i*Math.PI*2/n);
y1=20*Math.sin(i*Math.PI*2/n);
x=px+x1;
y=py+y1;
if (i==0)
context.moveTo(x,y);
else
context.lineTo(x,y);
}
}
context.closePath();
context.stroke();
context.fill();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="400">您的浏览器不支持canvas!
</canvas>
</body>
</html>
将上述HTML代码保存到一个html文本文件中,再在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中绘制出正3~10边形阵列,如图1所示。
图1 正3~10边形阵列
2.边长相等的正多边形
图1中的正N边形通过在圆周上取N等分点得到的,它们的外接圆的半径均相等,但各自的边长并不相等。若要绘制出边长相等的正N边形,可以编写如下的HTML文件。
<!DOCTYPE html>
<head>
<title>边长相等的正多边形</title>
<script type="text/javascript">
function draw(id)
{
var canvas=document.getElementById(id);
if (canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
context.strokeStyle="blue";
context.lineWidth=2;
var x0=150;
var y0=30;
context.beginPath();
for (n=3;n<=10;n++)
{
dig=6.28318/n;
context.moveTo(x0,y0);
x=x0;
y=y0;
for(i=0;i<n;i++)
{
x=x+80*Math.cos(i*dig);
y=y+80*Math.sin(i*dig);
context.lineTo(x,y);
}
context.lineTo(x0,y0);
}
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300">您的浏览器不支持canvas!
</canvas>
</body>
</html>
将上述HTML代码保存到一个html文本文件中,再在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中绘制出边长相等的正多边形(从正三角形到正十边形),如图2所示。
图2 边长相等的正多边形
3.漂亮的圆盘
在圆周上取N等分点,将这N个等分点两两用线段相连,共连N*(N-1)/2条边,可以绘制出圆盘图案。编写的HTML代码如下。
<!DOCTYPE html>
<head>
<title>圆盘图案</title>
<script type="text/javascript">
function draw(id)
{
var canvas=document.getElementById(id);
if (canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,400);
context.strokeStyle="red";
context.lineWidth=1;
var x=new Array(25);
var y=new Array(25);
var r = 180;
var n=25;
for (i = 0; i <n; i++)
{
x[i] = r * Math.cos(2 *Math.PI * i/n) + 200;
y[i] = r * Math.sin(2 *Math.PI * i/n) + 200;
}
context.beginPath();
for (i = 0; i <n-1; i++)
{
for (j = i + 1; j <n ; j++)
{
context.moveTo(x[i],y[i]);
context.lineTo(x[j],y[j]);
}
}
context.closePath();
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="400">您的浏览器不支持canvas!
</canvas>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中绘制出漂亮的圆盘图案,如图3所示。
图3 圆盘图案
4.顶点在圆周上的连续线段
前面例子中,圆周上取点的参数方程的夹角θ都在0~2π之间,若将θ乘以一个参数k,可绘制出一些有趣的图形。编写的HTML文件内容如下。
<!DOCTYPE html>
<head>
<title>顶点在圆周上的连续线段</title>
<script type="text/javascript">
function draw(id)
{
var canvas=document.getElementById(id);
if (canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,300,300);
context.fillStyle = "cyan";
context.strokeStyle = 'red';
context.lineWidth=1;
var k=11;
var dig=Math.PI/12*k;
var radius=100;
var dx = 150;
var dy = 150;
context.beginPath();
var x = radius*Math.sin(0)+dx;
var y = radius*Math.cos(0)+dy;
context.moveTo(x,y);
for(var i = 1; i < 24; i++)
{
var x = radius*Math.sin(i * dig);
var y = radius*Math.cos(i * dig);
context.lineTo(dx+x,dy+y);
}
context.closePath();
context.fill();
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="300">您的浏览器不支持canvas!
</canvas>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中绘制出如图4所示的图案。
图4 顶点在圆周上的连续线段
仿图4图形绘制的方法,我们不绘制直线,而是绘制贝塞尔曲线。编写如下的HTML文件。
<!DOCTYPE html>
<head>
<title>终点分布在圆周上的贝塞尔曲线</title>
<script type="text/javascript">
function draw(id)
{
var canvas=document.getElementById(id);
if (canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#EEEEDD";
context.fillRect(0,0,300,300);
context.fillStyle = 'cyan';
context.strokeStyle = 'red';
context.globalCompositeOperation ='and';
context.lineWidth=1;
var dig=Math.PI/15*11;
var radius=100;
var dx = 150;
var dy = 150;
context.beginPath();
for(var i = 0; i < 30; i++)
{
var x = radius*Math.sin(i * dig);
var y = radius*Math.cos(i * dig);
context.bezierCurveTo(dx+x,dy+y-100,dx+x+100,dy+y,dx+x,dy+y);
}
context.closePath();
context.fill();
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="300">您的浏览器不支持canvas!
</canvas>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中绘制出如图5所示的图案。
图5 终点分布在圆周上的贝塞尔曲线
JavaScript图形实例:正多边形的更多相关文章
- JavaScript图形实例:线段构图
在“JavaScript图形实例:四瓣花型图案”和“JavaScript图形实例:蝴蝶结图案”中,我们绘制图形时,主要采用的方法是先根据给定的曲线参数方程计算出两点坐标,然后将两点用线段连接起来,线段 ...
- JavaScript图形实例:再谈IFS生成图形
在“JavaScript图形实例:迭代函数系统生成图形”一文中,我们介绍了采用迭代函数系统(Iterated Function System,IFS)创建分形图案的一些实例.在该文中,仿射变换函数W的 ...
- JavaScript图形实例:随机SierPinski三角形
在“JavaScript图形实例:SierPinski三角形”中,我们介绍了SierPinski三角形的基本绘制方法,在“JavaScript图形实例:迭代函数系统生成图形”一文中,介绍了采用IFS方 ...
- JavaScript图形实例:图形的旋转变换
旋转变换:图形上的各点绕一固定点沿圆周路径作转动称为旋转变换.可用旋转角表示旋转量的大小. 旋转变换通常约定以逆时针方向为正方向.最简单的旋转变换是以坐标原点(0,0)为旋转中心,这时,平面上一点P( ...
- JavaScript图形实例:图形的平移和对称变换
1.1 六瓣花平移变换 平移变换是指图形从一个位置到另一个位置所作的直线移动.如果要把一个位于P(x,y)的点移到新位置P’(x’,y’),如图1,则只要在原坐标上加上平移距离Tx和Ty即可. 即 ...
- JavaScript图形实例:合成花卉图
我们知道在直角坐标系中,圆的方程可描述为: X=R*COS(α) Y=R*SIN(α) 用循环依次取α值为0~2π,计算出X和Y,在canvas画布中将坐标点(X,Y)用线连起来,可绘制出一个圆.编写 ...
- JavaScript图形实例:四瓣花型图案
设有坐标计算公式如下: X=L*(1+SIN(4α))*COS(α) Y=L*(1+SIN(4α))*SIN(α) 用循环依次取α值为0~2π,计算出X和Y,在canvas画布中对坐标位置(X,Y)描 ...
- JavaScript图形实例:图形的扇形变换和环形变换
1.1 扇形变换 将如图1所示的上边长方形的图形变换为下边的扇形图形的变换称为扇形变换. 设长方形图形中任一点P1(X1,Y1)变换为扇形图形上的点P2(X2,Y2),长方形的长为X,扇形圆心坐标为 ...
- JavaScript图形实例:圆内螺线
数学中有各式各样富含诗意的曲线,螺旋线就是其中比较特别的一类.螺旋线这个名词来源于希腊文,它的原意是“旋卷”或“缠卷”.例如,平面螺旋线便是以一个固定点开始向外逐圈旋绕而形成的曲线. 阿基米德螺线和黄 ...
随机推荐
- Python学习(四)—— 列表和元组的类中方法
列表 list:用中括号括起来,用“,”分割每个元素,列表中的元素可以是 数字.字符串.列表.布尔值......所有东西,可以说就是一个“集合” li = [1,3,5,'alex','age',[' ...
- Centos 7源码编译安装 php7.1 之生产篇
Centos 7源码编译安装 php7.1 之生产篇 Published 2017年4月30日 by Node Cloud 介绍: 久闻php7的速度以及性能那可是比php5系列的任何一版本都要快,具 ...
- Python识别验证码,基于Tesseract实现图片文字识别
一.简介 Tesseract是一个开源的文本识别[OCR]引擎,可通过Apache 2.0许可获得.它可以直接使用,或者使用API从图像中提取打印的文本,支持多种语言.该软件包包含一个ORC引擎[li ...
- 开源沙箱CuckooSandbox 介绍与部署
1. 介绍 1.1应用 在工作中很多时候需要自己对一些可以程序,可执行文件进行检测,当然我们可以通过VT,微步,等一些开源的平台进行检测.现在我们通过自己搭建的开源的沙箱进行检测.所谓沙箱,是分离运 ...
- ZOJ4110 Strings in the Pocket(2019浙江省赛)
给出两个字符串,询问有多少种反转方法可以使字符串1变成字符串2. 如果两个串相同,就用马拉车算法找回文串的数量~ 如果两个串不同,从前往后找第一个不同的位置l,从后往前找第二个不同的位置r,反转l和r ...
- idea配置jdk,maven,tomcat
1.idea配置jdk 2.idea配置maven 3.idea配置tomcat
- USER 指定当前用户,希望以某个已经建立好的用户来运行某个服务进程,不要使用 su 或者 sudo,这些都需要比较麻烦的配置,而且在 TTY 缺失的环境下经常出错。建议使用 gosu
USER 指定当前用户 格式:USER <用户名>[:<用户组>] USER 指令和 WORKDIR 相似,都是改变环境状态并影响以后的层.WORKDIR 是改变工作目录,US ...
- Linux下运行SuperSocket记录
Linux下运行SuperSocket程序步骤 需要将原程序的配置文件中的内容拷贝一份,改名成SuperSocket.SocketService.exe.config1.Linux中运行.Net程 ...
- Nexus 3048的NX-OS升级方法
1.System Software和Kick Start 与普通IOS设备不同,NX OS升级时,共有2个文件需要升级.安装,如果只安装其中一个,可能会导致设备重启后无法进入系统.这2个文件包括: N ...
- 【PAT甲级】1058 A+B in Hogwarts (20 分)
题意: 输入两组,每组三个非负整数A,B,C(A<=1e7,B<17,C<29),输出相加的和.(类似个位上29进制,十位上17进制运算) AAAAAccepted code: #d ...