回到首页
个人中心
反馈问题
注册登录
下载APP
代码
提交代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>慕课网Wiki</title> <style> #imooc{ border:1px solid #ccc; } </style> </head> <body> <canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas> <script> const canvas = document.getElementById('imooc'); canvas.width=300 canvas.height=300 const ctx = canvas.getContext('2d'); // 绘制弧线 ctx.beginPath(); ctx.moveTo(40,40); ctx.arcTo(260,40, 260,200, 60); //调用了绘制圆的函数 ctx.strokeStyle = "#456795"; ctx.lineWidth = 4; ctx.stroke(); // ==============一下内容为复制内容================= // 绘制切线 ctx.beginPath() ctx.strokeStyle="#ccc"; ctx.lineWidth=1; ctx.moveTo(40,40); ctx.lineTo(260,40); ctx.lineTo(260,260); ctx.stroke(); //绘制P点 ctx.beginPath(); ctx.arc(260,40,4,0, 2*Math.PI) ctx.fillStyle = "#000" ctx.fill() //绘制A点 ctx.beginPath(); ctx.arc(40,40,4,0, 2*Math.PI) ctx.fillStyle = "#000" ctx.fill() //绘制B点 ctx.beginPath(); ctx.arc(260,200,4,0, 2*Math.PI) ctx.fillStyle = "#000" ctx.fill() //绘制切点 ctx.beginPath(); ctx.arc(200,40,4,0, 2*Math.PI) ctx.fillStyle = "yellow" ctx.fill() //绘制切点 ctx.beginPath(); ctx.arc(260,100,4,0, 2*Math.PI) ctx.fillStyle = "yellow" ctx.fill() //绘制圆心 O 点 ctx.beginPath(); ctx.arc(200,100,4,0, 2*Math.PI) ctx.fillStyle = "blue" ctx.fill() //绘制辅助圆 ctx.beginPath(); ctx.lineWidth = 1; ctx.strokeStyle="#ccc" ctx.arc(200,100,60,0, 2*Math.PI) ctx.stroke() </script> </body> </html>
运行结果