第一讲:使用html5——canvas绘制奥运五环
<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>