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>
<body>
<canvas id="myCanvas" width="400" height="300" style="border:3px double #996633;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function draw() {
context.beginPath();
for (i = 0; i < 2 * Math.PI; i = i + 0.01) {
var x = 200 + (80 * Math.cos(3 * i) + 40 * Math.cos(14* i));
var y = 150 + (80 * Math.sin(3 * i) + 40 * Math.sin(14* i));
if (i==0)
context.moveTo(x,y);
else
context.lineTo(x, y);
}
context.closePath();
context.lineWidth=2;
context.strokeStyle = "purple";
context.stroke();
}
draw();
</script>
</body>
</html>
将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图1所示的线团图案。
图1 线团图案
2．七彩线团
我们可以将线团图案绘制过程进行动态展示，编写HTML文件如下。
<!DOCTYPE>
<html>
<head>
<title>七彩线团</title>
<canvas id="myCanvas" width="400" height="300" style="border:3px double #996633;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var i=0, t = 0;
var colors=new Array('red','orange','yellow','green','cyan','blue','purple');
function draw() {
var x = 200 + 90 * Math.cos(3 * i) + 45 * Math.cos(14 * i);
var y = 150 + 90 * Math.sin(3 * i) + 45 * Math.sin(14 * i);
i=i+0.01;
if (i>=2*Math.PI) {
context.clearRect(0,0,canvas.width,canvas.height);
i=0;
}
t = t + 1;
if (t > 6) t = 0;
context.beginPath();
context.arc(x, y, 3, 0, 2 * Math.PI);
context.fillStyle = colors[t];
context.fill();
}
window.setInterval('draw()', 20);
</script>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中看到七彩线团图案的动态绘制过程，如图2所示。
图2 七彩线团图案的动态绘制
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了