第一講：使用html5——canvas繪製奧運五環
阿新 • • 發佈：2019-02-10
<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>
