问题又来了,我该怎么求这个切点的坐标呢
唉,我这种菜鸡都忘记啦...
我想出来的方法手动移动,我就不写了,都忘光了
全部代码集合
let canvas = document.querySelector('#canvas') let ctx = canvas.getContext('2d'); // 绘制网格 grid for (let x = 0.5; x < 500; x += 10) { ctx.moveTo(x, 0); ctx.lineTo(x, 500) } for (let y = 0; y < 500; y += 10) { ctx.moveTo(0, y) ctx.lineTo(500, y) } ctx.strokeStyle = '#eee'; ctx.stroke(); // lines ctx.strokeStyle = 'gray'; ctx.lineWidth = 1; ctx.beginPath() ctx.moveTo(51, 24) ctx.lineTo(314, 540) // k=(y2-y1)/(x2-x1) ctx.moveTo(477, 34) ctx.lineTo(86, 484) ctx.stroke(); // 原点 // 问题来了两点确定一条直线怎么知道线上的点的位置关系 // 两点式公式 // (y-y2)/(y1-y2) = (x-x2)/(x1-x2)。 // 我们设y=200,可以求出x=140.7 ctx.beginPath() ctx.moveTo(140.7,200) ctx.arc(140.7,200,5,0,2*Math.PI) // 设x=350,求右边直线的y点 180.16 ctx.moveTo(350,180.16) ctx.arc(350,180.16,5,0,2*Math.PI) // 求原点坐标 ctx.moveTo(211.713,339.3166) ctx.arc(211.713,339.3166,5,0,2*Math.PI) ctx.fillStyle = 'red'; ctx.fill(); // 标记点的坐标 ctx.font='14px Arial' ctx.beginPath() ctx.fillText("(x0,y0)",140.7+5,200+5) ctx.fillText("(x1,y1)",211.713+5,339.3166+5) ctx.fillText("(x2,y2)",350+5,180.16+5) // 编写arcTo ctx.beginPath() ctx.lineWidth=3; ctx.moveTo(140.7,200) ctx.arcTo(211.713,339.3166,350,180.16,100) ctx.stroke()这种辅助线有点复杂.那我们可以用简单点的直线辅助线
相信大家已经很熟练了,直接上代码吧
ctx.strokeStyle = '#eee'; ctx.stroke(); // lines ctx.strokeStyle = 'gray'; ctx.lineWidth = 1; ctx.beginPath() ctx.moveTo(81, 24) ctx.lineTo(81, 400) ctx.moveTo(400, 300) ctx.lineTo(40, 300) ctx.stroke(); // 原点 ctx.beginPath() ctx.moveTo(81, 200) ctx.arc(81, 200, 5, 0, 2 * Math.PI) ctx.moveTo(220, 300) ctx.arc(220, 300, 5, 0, 2 * Math.PI) // 求原点坐标 ctx.moveTo(81, 300) ctx.arc(81, 300, 5, 0, 2 * Math.PI) ctx.fillStyle = 'red'; ctx.fill(); // 标记点的坐标 ctx.font = '14px Arial' ctx.beginPath() ctx.fillText("(x0,y0)", 81 + 5, 200 + 5) ctx.fillText("(x1,y1)", 81 + 5, 300 + 5) ctx.fillText("(x2,y2)", 220 + 5, 300 + 5) // 编写arcTo ctx.beginPath() ctx.lineWidth = 3; ctx.moveTo(81, 200) ctx.arcTo(81, 300, 220, 300, 100) ctx.stroke()