aTeacher - 博客园

JavaScript图形实例：正多边形

摘要：圆心位于坐标原点，半径为R的圆的参数方程为 X=R*COS(θ) Y=R*SIN(θ) 在圆上取N个等分点，将这N个点首尾连接N条边，可以得到一个正N边形。 1．正多边形阵列构造一个8行8列的正N（N为3~10）边形阵列。编写如下的HTML代码。 <!DOCTYPE html> <head> <t 阅读全文

posted @ 2019-12-23 20:37 aTeacher 阅读(1483) 评论(0) 推荐(2)

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

摘要： 1.1 六瓣花平移变换平移变换是指图形从一个位置到另一个位置所作的直线移动。如果要把一个位于P（x,y）的点移到新位置P’(x’,y’)，如图1，则只要在原坐标上加上平移距离Tx和Ty即可。即 x’=x+Tx y’=y+Ty 图1 点的平移生成一个六瓣花型图案的基本数据，通过平移变换绘制8行8 阅读全文

posted @ 2019-12-23 17:05 aTeacher 阅读(1462) 评论(0) 推荐(0)

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

摘要： 1.1 扇形变换将如图1所示的上边长方形的图形变换为下边的扇形图形的变换称为扇形变换。设长方形图形中任一点P1(X1,Y1)变换为扇形图形上的点P2(X2,Y2)，长方形的长为X，扇形圆心坐标为（X0,Y0），扇形半径为L，扇形与X轴的最小夹角为B，扇形弧对应夹角为C，则点P2的坐标计算公式为：阅读全文

posted @ 2019-12-23 12:12 aTeacher 阅读(1396) 评论(0) 推荐(0)

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

摘要：旋转变换：图形上的各点绕一固定点沿圆周路径作转动称为旋转变换。可用旋转角表示旋转量的大小。旋转变换通常约定以逆时针方向为正方向。最简单的旋转变换是以坐标原点(0,0)为旋转中心，这时，平面上一点P(x,y) 旋转了θ之后，变成点P’(x,y) ，如图1所示。图1 点P逆时针旋转由三角关系可得：阅读全文

posted @ 2019-12-22 19:44 aTeacher 阅读(2482) 评论(0) 推荐(1)

JavaScript图形实例：五角星

摘要： 1．五角星在半径为80的圆周上取5个点，用这5个点依次首尾连接画5条线，可以绘制出一个五角星图案。编写如下的HTML代码。 <!DOCTYPE html> <head> <title>五角星（一）</title> <script type="text/javascript"> function 阅读全文

posted @ 2019-12-21 07:47 aTeacher 阅读(3587) 评论(0) 推荐(0)

JavaScript动画实例：旋转的圆球

摘要： 1．绕椭圆轨道旋转的圆球在Canvas画布中绘制一个椭圆，然后在椭圆上绘制一个用绿色填充的实心圆。之后每隔0.1秒刷新，重新绘制椭圆和实心圆，重新绘制时，实心圆的圆心坐标发生变化，但圆心坐标仍然位于椭圆曲线上。这样，可以得到绕椭圆轨道旋转的圆球动画。编写如下的HTML代码。 <!DOCTYPE 阅读全文

posted @ 2019-12-20 20:14 aTeacher 阅读(2114) 评论(0) 推荐(0)

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）用线连起来，可绘制出一个封闭曲线图形，可得到一个线团图阅读全文

posted @ 2019-12-20 18:03 aTeacher 阅读(519) 评论(0) 推荐(0)

JavaScript图形实例：圆形图案

摘要：在HTML5的Canvas 2D API中，可以调用arc方法绘制圆或圆弧。该方法调用格式为： context . arc(x, y, radius, startAngle, endAngle, anticlockwise) 其中：（x,y）为圆心坐标，radius为半径，startAngle和en 阅读全文

posted @ 2019-12-20 16:07 aTeacher 阅读(2498) 评论(0) 推荐(0)

JavaScript图形实例：合成花卉图

摘要：我们知道在直角坐标系中，圆的方程可描述为： X=R*COS(α) Y=R*SIN(α) 用循环依次取α值为0~2π，计算出X和Y,在canvas画布中将坐标点（X,Y）用线连起来，可绘制出一个圆。编写HTML文件内容如下： <!DOCTYPE html> <head> <title>圆的绘制</ti 阅读全文

posted @ 2019-12-19 19:16 aTeacher 阅读(557) 评论(0) 推荐(1)

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

摘要：设有坐标计算公式如下： X=L*(1+SIN(4α))*COS(α) Y=L*(1+SIN(4α))*SIN(α) 用循环依次取α值为0~2π，计算出X和Y,在canvas画布中对坐标位置（X,Y）描点，可绘制出一个曲线图形。编写HTML文件内容如下： <!DOCTYPE html> <head> 阅读全文

posted @ 2019-12-19 06:46 aTeacher 阅读(1622) 评论(1) 推荐(1)

I am a teacher!

导航

公告