HTML5画布上的JavaScript奥运之环 ctx=c1.getContext（'2d'） ctx.fillStyle='#7ef'//用较暗的边框绘制蓝色背景 ctx.fillRect（0,040400） ctx.fillStyle='#9ff' ctx.fillRect（10,10400-20400-20） 变量X=75，W=50，G=20 ctx.lineWidth=10 var colors=[“蓝色”、“黑色”、“红色”、“黄色”、“绿色”] 变量args=[ [X，X，W]， [X+W+W+G，X，W]， [X+W+W+G+W+W+G，X，W]， [X+W+G/2，X+W，W]， [X+W+G/2+W+W+G，X+W，W]] 而（colors.length>0）{ ctx.strokeStyle=colors.shift（） ctx.beginPath（） ctx.arc.apply（ctx，args.shift（）.concat（[0，Math.PI*2，true]）） ctx.stroke（） }

以上是我目前的代码。我的目标是逗孩子们开心，有12岁的男孩，但我的代码还不够惊人，有没有可能通过删除所有手工编码的坐标来减少无聊？让环“相互连接”也很酷，但如何实现呢

以下是我当前代码的输出：

奥运五环应该是这样的：

适合12岁的孩子

我为您编写了一些代码，这些代码不一定无聊或有趣，也不一定简单或困难，但它完成了任务：

<center><canvas id=c1 width=400 height=400></canvas>
<script>
    ctx = c1.getContext('2d')
    ctx.fillStyle = '#7ef' // draw blue background with the darker frame
    ctx.fillRect(0, 0, 400, 400)
    ctx.fillStyle = '#9ff'
    ctx.fillRect(10, 10, 400-20, 400-20)

    var X = 75, W = 50, G = 20
    ctx.lineWidth = 10
    var colors = ['blue', 'black', 'red', 'yellow', 'green']
    var args = [
        [X,X,W],
        [X+W+W+G,X,W],
        [X+W+W+G+W+W+G,X,W],
        [X+W+G/2,X+W,W],
        [X+W+G/2+W+W+G,X+W,W]]

    while (colors.length > 0) {
        ctx.strokeStyle = colors.shift()
        ctx.beginPath()
        ctx.arc.apply(ctx, args.shift().concat([0,Math.PI*2,true]))
        ctx.stroke()
    }
</script>

如果我要解释代码，我会从circles变量开始，它是一个数组，表示每个圆的颜色、中心以及它是否在顶行。我会注释掉

+=radius/2

和

radius/4

部分，并为它们运行代码，表明这些圆在一起太紧，并取消注释它们，以表明更改x坐标会将它们分开

然后我将解释

drawArc

函数，该函数以不同的线宽绘制圆的一部分，首先使用白色，然后使用实际颜色。这几乎是整个剧本中最难的部分

最后，我将再次运行脚本，并注释掉最后一个forEach，以显示最后绘制的环完全覆盖了之前绘制的环，并向12岁的孩子寻求解决方案。解决方案应该是在零件中绘制圆

我已经从顶部开始将圆圈分成6块，如果你仔细看一看，你会发现同一部分可以被覆盖，也可以在顶部，如果圆圈是否在顶行。最终的for each重绘每个圆的2个部分，这些部分必须位于交点的顶部

最后，在我的代码中，12岁的孩子注意到交叉点实际上是反向的，而提出解决方案的孩子则会得到更多的加分。（显然，最简单的解决办法是摆弄最后一个forEach）。编辑：实际上只是将条件设置为

！circle.isTop

更简单

PS：有些舍入误差会导致圆弧相交处出现细白线。它们是可以修好的，但我没有费心

var canvas=document.getElementById（'c1'）.getContext（'2d'）；
var半径=50；
变量圆=[
{颜色：'blue'，x:2*半径-半径/2，y:2*半径，q:[1,2,3,0]}，
{颜色：'black'，x:4*半径，y:2*半径，q:[2,0,1,3]}，
{颜色：'red'，x:6*半径+半径/2，y:2*半径，q:[2,0,1,3]}，
{颜色：'yellow'，x:3*半径-半径/4，y:3*半径，q:[3,0,1,2]}，
{颜色：'green'，x:5*半径+半径/4，y:3*半径，q:[3,0,1,2]}
];
函数drawArc（画布、圆、q）{
var s=（圆圈q[q]+0.5）/2*Math.PI，
e=（圆圈q[q]-0.5）/2*Math.PI；
canvas.lineWidth=16；
canvas.strokeStyle='white'；
canvas.beginPath（）；
圆弧（圆x，圆y，半径s，e，真）；
canvas.stroke（）；
canvas.lineWidth=10；
canvas.strokeStyle=circle.color；
canvas.beginPath（）；
圆弧（圆x，圆y，半径s，e，真）；
canvas.stroke（）；
}
对于（变量q=0；q<4；++q）{
圆。forEach（函数（圆）{
drawArc（画布、圆圈、q）；
})
}

在

for

循环的每个步骤中，为每个圆绘制一个四分之一圆弧（象限）-

圆。q

确定象限围绕圆绘制的顺序，通过仔细排序，您可以让它在另一个环顶部绘制之前绘制另一个环下方的象限

（感谢Tibos提供的初始代码）

---

如果你想使它更“有趣”，那么你可以使弧长变小，并在每次绘制之间添加一个延迟，以“动画化”环的外观。

你必须绘制的不是完整的圆，而是部分圆以进行正确的相交。@特洛伊，那只是复制粘贴错误，很抱歉。@exebook我认为这没有什么魔力……你必须想一个算法或什么东西自己画出来。12岁的男孩？陛下有趣。我喜欢。@bjb568，如果你12岁，你觉得这段代码无聊还是有趣，容易还是困难？+1很努力，但并不完全正确。你的链接没有适当地在下面。我建议把蓝色、黑色和红色画成一个完整的圆圈，然后把黄色和绿色画成两部分，这样就可以得到正确的结果@标记如果你检查PS前面的最后一段，你会看到为什么它们被颠倒了。此外，要计算如何绘制黄色的圆圈/圆弧也相当困难，因此看起来蓝色的圆圈/圆弧位于顶部。我认为我在顶部画蓝色圆圈的方法更容易书写和理解。

var canvas = document.getElementById('c1').getContext('2d');
var radius = 50;

var circles = [
  {
    color:'blue',
    x : 2*radius - radius/2,
    y : 2*radius,
    isTop: true
  } , {
    color:'black',
    x : 4*radius,
    y : 2*radius,
    isTop: true
  } , {
    color:'red',
    x : 6*radius + radius/2,
    y : 2*radius,
    isTop: true
  } , {
    color:'yellow',
    x : 3*radius - radius/4,
    y : 3*radius,
    isTop: false
  } , {
    color:'green',
    x : 5*radius + radius/4,
    y : 3*radius,
    isTop: false
  }
];

function drawArc(canvas, color, x, y, start, end) {
  if (color !== 'white') drawArc(canvas, 'white', x, y, start, end);

  canvas.lineWidth = color === 'white' ? 16 : 10;
  canvas.strokeStyle = color;

  canvas.beginPath();
  canvas.arc(x, y, radius, start - Math.PI/2, end - Math.PI/2, true);
  canvas.stroke();
}

circles.forEach(function(circle){
  drawArc(canvas, circle.color, circle.x, circle.y, 0, Math.PI*2);
});

circles.forEach(function(circle){
  if (circle.isTop) {
     drawArc(canvas, circle.color, circle.x, circle.y, Math.PI, Math.PI*2/3);
     drawArc(canvas, circle.color, circle.x, circle.y, Math.PI*5/3, Math.PI*4/3);
  } else {
     drawArc(canvas, circle.color, circle.x, circle.y, 0, Math.PI/3);
     drawArc(canvas, circle.color, circle.x, circle.y, Math.PI*2/3, Math.PI/3);
  }
});

var canvas = document.getElementById('c1').getContext('2d');
var radius = 50;

var circles = [
    { color:'blue',   x: 2*radius - radius/2, y: 2*radius, q: [1,2,3,0] },
    { color:'black',  x: 4*radius,            y: 2*radius, q: [2,0,1,3] },
    { color:'red',    x: 6*radius + radius/2, y: 2*radius, q: [2,0,1,3] },
    { color:'yellow', x: 3*radius - radius/4, y: 3*radius, q: [3,0,1,2] },
    { color:'green',  x: 5*radius + radius/4, y: 3*radius, q: [3,0,1,2] }
];

function drawArc(canvas, circle, q) {
    var s = (circle.q[q]+0.5)/2 * Math.PI,
        e = (circle.q[q]-0.5)/2 * Math.PI;

    canvas.lineWidth   = 16;
    canvas.strokeStyle = 'white';
    canvas.beginPath();
    canvas.arc( circle.x, circle.y, radius, s, e, true );
    canvas.stroke();

    canvas.lineWidth   = 10;
    canvas.strokeStyle = circle.color;
    canvas.beginPath();
    canvas.arc( circle.x, circle.y, radius, s, e, true );
    canvas.stroke();
}

for ( var q = 0; q < 4; ++q ){
    circles.forEach(function(circle){
        drawArc( canvas, circle, q );
    })
}