<html>
<head>
<title>初识canvas</title>
</head>
<body>
<canvas id="mc" width="400px" height="200px" style="border:1px solid #c3c3c3;">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('mc');
var ctx = canvas.getContext('2d');
ctx.lineWidth = 5;//设置圆的宽度
ctx.strokeStyle = "#163B62";//设置第一个圆的颜色
ctx.beginPath();
ctx.arc(70,70,40,0,Math.PI*2,true);
ctx.stroke();
ctx.strokeStyle = "#000000";<span style="font-family: Arial, Helvetica, sans-serif;">//设置第二个圆的颜色</span>
ctx.beginPath();
ctx.arc(160,70,40,0,Math.PI*2,true);
ctx.stroke();
ctx.strokeStyle = "#BF0628";
ctx.beginPath();
ctx.arc(250,70,40,0,Math.PI*2,true);
ctx.stroke();
ctx.strokeStyle = "#EBC41F";
ctx.beginPath();
ctx.arc(110,110,40,0,Math.PI*2,true);
ctx.stroke();
ctx.strokeStyle = "#19814A";
ctx.beginPath();
ctx.arc(200,110,40,0,Math.PI*2,true);
ctx.stroke();
//以下開始画出五环环环相扣的样子
ctx.strokeStyle = "#163B62";
ctx.beginPath();
ctx.arc(70,70,40,Math.PI*1.9,Math.PI*2.1,true);
ctx.stroke();
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.arc(160,70,40,Math.PI*0.9,Math.PI*2.1,true);
ctx.stroke();
ctx.strokeStyle = "#BF0628";
ctx.beginPath();
ctx.arc(250,70,40,Math.PI*0.9,Math.PI*2.1,true);
ctx.stroke();
</script>
</body>
</html>
