canvas一周一练 -- canvas绘制奥运五环（1） - 张不丢_H5之家

运行效果：

<!DOCTYPE html> <html> <head> </head> <body> <canvas id=width=height=>A drawing of someing!</canvas> <script type=> ); if(drawing.getContext) { context = drawing.getContext(); context.lineWidth = 7; context.strokeStyle = ; context.beginPath(); context.arc(70, 70, 40, 0, 2*Math.PI, false); context.stroke(); context.strokeStyle = ; context.beginPath(); context.arc(160, 70, 40, 0, 2*Math.PI, false); context.stroke(); context.strokeStyle = ; context.beginPath(); context.arc(250, 70, 40, 0, 2*Math.PI, false); context.stroke(); context.strokeStyle = ; context.beginPath(); context.arc(115, 110, 40, 0, 2*Math.PI, false); context.stroke(); context.strokeStyle = ; context.beginPath(); context.arc(205, 110, 40, 0, 2*Math.PI, false); context.stroke(); //环环相扣，画弧（实现相关圆弧的覆盖） context.strokeStyle = ; context.beginPath(); context.arc(70, 70, 40, 1.9*Math.PI, 2.1*Math.PI, false); context.stroke(); context.strokeStyle = ; context.beginPath(); context.arc(160, 70, 40, 1.9*Math.PI, 2.1*Math.PI, false); context.stroke(); context.beginPath(); context.arc(160, 70, 40, 0.5*Math.PI, 0.7*Math.PI, false); context.stroke(); context.strokeStyle = ; context.beginPath(); context.arc(250, 70, 40, 0.5*Math.PI, 0.7*Math.PI, false); context.stroke(); } </script> </body> </html>