首页使用canvas画出两条直线在交汇点显示当前角度和圆弧

使用canvas画出两条直线在交汇点显示当前角度和圆弧

时间: 2024-03-09 17:50:05 浏览: 66

好的，以下是一个简单的示例代码，展示如何在 canvas 中画出两条直线，在交汇点处显示当前角度和圆弧： ```html <!DOCTYPE html> <html> <head> <title>Canvas Angle and Arc</title> <style> canvas { border: 1px solid #000; } </style> </head> <body> <canvas id="myCanvas" width="400" height="400"></canvas> <script> // 获取 canvas 元素和上下文对象 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 设置两条直线的起点和终点坐标 var x1 = 100, y1 = 100, x2 = 300, y2 = 300; // 画第一条直线 ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y1); ctx.strokeStyle = "#f00"; ctx.stroke(); // 画第二条直线 ctx.beginPath(); ctx.moveTo(x2, y1); ctx.lineTo(x2, y2); ctx.strokeStyle = "#0f0"; ctx.stroke(); // 计算两条直线的夹角（弧度） var angle = Math.atan2(y2 - y1, x2 - x1); // 在交汇点处绘制圆弧和角度信息 ctx.beginPath(); ctx.arc(x2, y1, 50, angle, angle + Math.PI / 2); ctx.strokeStyle = "#00f"; ctx.stroke(); ctx.font = "20px Arial"; ctx.fillStyle = "#000"; ctx.fillText("Angle: " + angle.toFixed(2) + " rad", x2 + 10, y1 + 30); </script> </body> </html> ``` 运行代码后，会在 canvas 中画出两条直线，且在交汇点处绘制一个圆弧和角度信息。你可以根据需要进行修改和调整。

阅读全文