<!DOCTYPE html> <html> <head> </head> <body> <canvas id=drawing width=800 height=600>A drawing of someing!</canvas> <script type=text/javascript>var drawing = document.getElementById('drawing');if(drawing.getContext) {//绘制奥运五环,画圆var context = drawing.getContext('2d'); context.lineWidth = 7; context.strokeStyle = '#0180C3'; context.beginPath(); context.arc(70, 70, 40, 0, 2*Math.PI, false); context.stroke(); context.strokeStyle = '#000'; context.beginPath(); context.arc(160, 70, 40, 0, 2*Math.PI, false); context.stroke(); context.strokeStyle = '#BF0628'; context.beginPath(); context.arc(250, 70, 40, 0, 2*Math.PI, false); context.stroke(); context.strokeStyle = '#EBC41F'; context.beginPath(); context.arc(115, 110, 40, 0, 2*Math.PI, false); context.stroke(); context.strokeStyle = '#198E4A'; context.beginPath(); context.arc(205, 110, 40, 0, 2*Math.PI, false); context.stroke();//环环相扣,画弧(实现相关圆弧的覆盖)context.strokeStyle = '#0180C3'; context.beginPath(); context.arc(70, 70, 40, 1.9*Math.PI, 2.1*Math.PI, false); context.stroke(); context.strokeStyle = '#000'; 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 = '#BF0628'; context.beginPath(); context.arc(250, 70, 40, 0.5*Math.PI, 0.7*Math.PI, false); context.stroke(); }</script> </body> </html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。