|
如果需要学习视频教程可以加QQ：1416759661
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="box1" width="1000" height="800"></canvas> <script type="text/javascript"> var canvas1=document.querySelector("#box1"); var ctx=canvas1.getContext("2d");
//绘制圆 第二排第一个圆环 ctx.save(); ctx.beginPath(); ctx.arc(310,310,100,0,2*Math.PI,false); ctx.strokeStyle="#E4C419"; ctx.lineWidth=6; ctx.stroke(); ctx.closePath(); ctx.restore();
//绘制圆 第二排第二个圆环 ctx.save(); ctx.beginPath(); ctx.arc(530,310,100,0,2*Math.PI,false); ctx.strokeStyle="#1A8C4B"; ctx.lineWidth=6; ctx.stroke(); ctx.closePath(); ctx.restore();
//绘制圆 第一排第一个圆环 ctx.save(); ctx.beginPath(); ctx.arc(200,200,100,0,2*Math.PI,false); ctx.strokeStyle="#133D62"; ctx.lineWidth=6; ctx.stroke(); ctx.closePath(); ctx.restore();
//绘制圆 第一排第二个圆环 ctx.save(); ctx.beginPath(); ctx.arc(420,200,100,0,2*Math.PI,false); ctx.strokeStyle="#000000"; ctx.lineWidth=6; ctx.stroke(); ctx.closePath(); ctx.restore();
//绘制圆 第一排第三个圆环 ctx.save(); ctx.beginPath(); ctx.arc(640,200,100,0,2*Math.PI,false); ctx.strokeStyle="#C1042A"; ctx.lineWidth=6; ctx.stroke(); ctx.closePath(); ctx.restore();
//绘制圆 第二排第一个圆环 ctx.save(); ctx.beginPath(); ctx.arc(310,310,100,(-45/180)*Math.PI,(225/180)*Math.PI,false); ctx.strokeStyle="#E4C419"; ctx.lineWidth=6; ctx.stroke(); ctx.closePath(); ctx.restore();
//绘制圆 第二排第二个圆环 ctx.save(); ctx.beginPath(); ctx.arc(530,310,100,(-45/180)*Math.PI,(225/180)*Math.PI,false); ctx.strokeStyle="#1A8C4B"; ctx.lineWidth=6; ctx.stroke(); ctx.closePath(); ctx.restore();
</script> </body> </html>
 QQ：
|