<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>奥运五环</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border-style:dashed;border-width:thin"></canvas>
<script>
/*arc(x, y, radius, startAngle, endAngle, counterclockwise)
参数 描述
x, y 描述弧的圆形的圆心的坐标。
radius 描述弧的圆形的半径。
startAngle, endAngle 沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。
沿着 X 轴正半轴的三点钟方向的角度为 0，角度沿着逆时针方向而增加。
counterclockwise 弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历。*/
var canvas = document.getElementById("myCanvas");
//返回绘图对象
var ctx = canvas.getContext("2d");
//坐标，圆半径
ctx.lineWidth = 5;
ctx.strokeStyle = "#163B62";
ctx.beginPath();
ctx.arc(70, 70, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.arc(160, 70, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.strokeStyle = "#BF0628";
ctx.beginPath();
ctx.arc(250, 70, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.strokeStyle = "#EBC41F";
ctx.beginPath();
ctx.arc(110, 110, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.strokeStyle = "#198E4A";
ctx.beginPath();
ctx.arc(200, 110, 40, 0, Math.PI * 2, false);
ctx.stroke();
//开始调节
ctx.strokeStyle = "#163B62";
ctx.beginPath();
ctx.arc(70, 70, 40, Math.PI * 1, Math.PI * 2.4, false);
ctx.stroke();
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.arc(160, 70, 40, Math.PI * 1.6, Math.PI * 2.3, false);
ctx.stroke();
ctx.strokeStyle = "#BF0628";
ctx.beginPath();
ctx.arc(250, 70, 40, Math.PI * 2, Math.PI * 2.9, false);
ctx.stroke();
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.arc(160, 70, 40, Math.PI * 2, Math.PI * 2.8, false);
ctx.stroke();
</script>
</body>
</html>