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==null)

return false;

var context=canvas.getContext('2d');

context.fillStyle="#EEEEDD";

context.fillRect(0,0,400,300);

context.translate(100,150);

context.strokeStyle = 'red';

draw5Star(context);

context.stroke();

context.translate(200,0);

context.fillStyle = 'red';

draw5Star(context);

context.fill();

}

function draw5Star(context)

{

var dx = 0;

var dy = 0;

var radius = 80;

context.beginPath();

var x = radius*Math.sin(Math.PI / 5)+dx;

var y = radius*Math.cos(Math.PI / 5)+dy;

context.moveTo(x,y);

var dig = Math.PI / 5 * 4;

for(var i = 1; i < 5; i++)

{

var x = radius*Math.sin(i * dig+Math.PI / 5);

var y = radius*Math.cos(i * dig+Math.PI / 5);

context.lineTo(dx+x,dy+y);

}

context.closePath();

}

</script>

</head>

<body onload="draw('myCanvas');">

<canvas id="myCanvas" width="400" height="300">您的浏览器不支持canvas!

</canvas>

</body>

</html>

将上述HTML代码保存到一个html文本文件中,再在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中绘制出五角星图案1,如图1所示。

图1  五角星图案1

也可以通过绘制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="#EEEEDD";

context.fillRect(0,0,400,300);

context.translate(100,150);

context.strokeStyle = 'red';

draw5Star(context);

context.stroke();

context.translate(150,150);

context.fillStyle = 'red';

draw5Star(context);

context.fill();

}

function draw5Star(context)

{

var r = 80;

context.beginPath()

context.moveTo(r,0);

for (var i=0;i<9;i++)

{

context.rotate(Math.PI/5);

if(i%2 == 0)

context.lineTo((r/2),0);

else

context.lineTo(r,0);

}

context.closePath();

}

</script>

</head>

<body onload="draw('myCanvas');">

<canvas id="myCanvas" width="400" height="300">您的浏览器不支持canvas!

</canvas>

</body>

</html>

将上述HTML代码保存到一个html文本文件中,再在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中绘制出五角星图案2,如图2所示。

图2  五角星图案2

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="#EEEEDD";

context.fillRect(0,0,350,300);

context.translate(180,30);

context.fillStyle = 'rgba(255,0,255,0.25)';

for(var i = 0;i < 50;i++)

{

context.translate(25,25);

context.scale(0.95,0.95);

context.rotate(Math.PI / 10);

draw5Star(context);

context.fill();

}

}

function draw5Star(context)

{

var dx = 100;

var dy = 0;

var radius = 50;

context.beginPath();

var x = radius*Math.sin(Math.PI / 5)+dx;

var y = radius*Math.cos(Math.PI / 5)+dy;

context.moveTo(x,y);

var dig = Math.PI / 5 * 4;

for(var i = 1; i < 5; i++)

{

var x = radius*Math.sin(i * dig+Math.PI / 5);

var y = radius*Math.cos(i * dig+Math.PI / 5);

context.lineTo(dx+x,dy+y);

}

context.closePath();

}

</script>

</head>

<body onload="draw('myCanvas');">

<canvas id="myCanvas" width="350" height="300">您的浏览器不支持canvas!

</canvas>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中绘制出螺旋五角星图案,如图3所示。

图3  螺旋五角星

JavaScript图形实例:五角星的更多相关文章

  1. JavaScript图形实例:线段构图

    在“JavaScript图形实例:四瓣花型图案”和“JavaScript图形实例:蝴蝶结图案”中,我们绘制图形时,主要采用的方法是先根据给定的曲线参数方程计算出两点坐标,然后将两点用线段连接起来,线段 ...

  2. JavaScript图形实例:再谈IFS生成图形

    在“JavaScript图形实例:迭代函数系统生成图形”一文中,我们介绍了采用迭代函数系统(Iterated Function System,IFS)创建分形图案的一些实例.在该文中,仿射变换函数W的 ...

  3. JavaScript图形实例:随机SierPinski三角形

    在“JavaScript图形实例:SierPinski三角形”中,我们介绍了SierPinski三角形的基本绘制方法,在“JavaScript图形实例:迭代函数系统生成图形”一文中,介绍了采用IFS方 ...

  4. JavaScript图形实例:图形的旋转变换

    旋转变换:图形上的各点绕一固定点沿圆周路径作转动称为旋转变换.可用旋转角表示旋转量的大小. 旋转变换通常约定以逆时针方向为正方向.最简单的旋转变换是以坐标原点(0,0)为旋转中心,这时,平面上一点P( ...

  5. JavaScript图形实例:Canvas API

    1.Canvas概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap). 要使用HTML5在浏览器窗口中绘制 ...

  6. JavaScript图形实例:合成花卉图

    我们知道在直角坐标系中,圆的方程可描述为: X=R*COS(α) Y=R*SIN(α) 用循环依次取α值为0~2π,计算出X和Y,在canvas画布中将坐标点(X,Y)用线连起来,可绘制出一个圆.编写 ...

  7. JavaScript图形实例:四瓣花型图案

    设有坐标计算公式如下: X=L*(1+SIN(4α))*COS(α) Y=L*(1+SIN(4α))*SIN(α) 用循环依次取α值为0~2π,计算出X和Y,在canvas画布中对坐标位置(X,Y)描 ...

  8. JavaScript图形实例:图形的扇形变换和环形变换

    1.1  扇形变换 将如图1所示的上边长方形的图形变换为下边的扇形图形的变换称为扇形变换. 设长方形图形中任一点P1(X1,Y1)变换为扇形图形上的点P2(X2,Y2),长方形的长为X,扇形圆心坐标为 ...

  9. JavaScript图形实例:圆内螺线

    数学中有各式各样富含诗意的曲线,螺旋线就是其中比较特别的一类.螺旋线这个名词来源于希腊文,它的原意是“旋卷”或“缠卷”.例如,平面螺旋线便是以一个固定点开始向外逐圈旋绕而形成的曲线. 阿基米德螺线和黄 ...

随机推荐

  1. 阿里云ECS搭建kubernetes1.11

    环境信息 说明 1.使用kubeadm安装集群 虚拟机信息 hostname memory cpu disk role node1.com 4G 2C vda20G vdb20G master nod ...

  2. AntDeploy一键发布netcore3.0Windows服务到远程服务器

    *:first-child { margin-top: 0 !important; } .markdown-body>*:last-child { margin-bottom: 0 !impor ...

  3. Shell - 长 ping 脚本监控网络时延

    生产环境中, 网络时延是一个很重要的指标. 为了方便检查网络时延的大小, 我们可以通过ping命令实现长时间的网络监控. 1 ping 命令的使用 1.1 常用参数 -i: 每次执行ping操作的间隔 ...

  4. setBounds方法,与setLayout(null)

    首先把相关容器的布局方式设为 setLayout(null); 然后调用组件的  setBounds() 方法 设置button的位置为(100,100) 长宽分别为 60,25 jButton.se ...

  5. python接口设计中的__all__和del

    最近在实现python接口中遇到了一些小问题,解决后总结如下. 目的:在设计接口时,只暴露某个文件的特定方法. 例如: t.py import os import sys def a(): pass ...

  6. scrapy抓取人人网上的“新鲜事”

    利用scrapy模拟登陆人人网,笔者本打算抓取一下个人页面新鲜事,感觉这个网站越做越差,都懒得抓里面的东西了.这里仅仅模拟人人网登陆,说明一下scrapy的POST请求问题. 人人网改版之后,反爬措施 ...

  7. 【springcloud】3.记一次网关优化

    今天早上过来突然被告知我们提供给外系统的接口服务出问题了,失败率高达20% 很奇怪,昨天周末,今天也没做什么处理,怎么突然变成这样了 1.接口测试 第一反应是接口是不是出问题了,然后我立马打开jmet ...

  8. vscode启动黑屏

    今天打开vscode的时候突然就黑屏了,一脸懵 于是上网找了一下,根据这位博主的解决办法: https://blog.csdn.net/insgo/article/details/102975986 ...

  9. JAVA合并多个word文档根据文章标题生成目录

    此产品版本是免费版的,我也是在用免费,除了只能单次识别25张一下的word和生成pdf有限制,其他的功能都和正式版差不多. 如果你几十个文档,每个文档几页,输出出来超过25页,那没关系,依然可以使用. ...

  10. flanneld 安装

    目录 flanneld 安装 下载分发flanneld二进制文件 分发二进制文件到所有集群的节点 创建Flannel证书和私钥 创建证书签名请求 生成证书和私钥 向etcd写入Pod网段信息 创建fl ...