在Canvas中使用arc（）方法增加多余的线条 [英] An extra unwanted line using the arc() method in Canvas
问题描述
<html>
<head>
<script>
function draw() {
var canvas = document.getElementById('draw');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var ang=prompt("Degree?")
var sin=Math.sin(ang * Math.PI/180);var cos=Math.cos(ang * Math.PI/180);var tan=Math.tan(ang * Math.PI/180);
if (ang == 45) {tan = 1}
ctx.beginPath()
ctx.font = "18px Calibri";
ctx.fillStyle = "Black";
ctx.fillText("k", 5, 150);
ctx.moveTo(20,20)
ctx.lineTo(20,220)
ctx.lineTo(20+(200*tan),220);
ctx.closePath()
ctx.stroke()
ctx.beginPath()
ctx.moveTo(20,210)
if (ang <= 20){
ctx.lineTo(20+(30*tan),210)
ctx.lineTo(20+(30*tan),220)}
else if(ang <= 45){
ctx.lineTo(20+(10*tan),210)
ctx.lineTo(20+(10*tan),220)}
else {ctx.lineTo(30,210)
ctx.lineTo(30,220)}
ctx.arc(20,20,30,Math.PI/2,Math.PI/2-(ang*Math.PI/180),true)
ctx.stroke()
ctx.fillText(tan+"k", 47, 240);
if (ang <= 20) {ctx.fillText(Math.sqrt(tan*tan+1)+"k",30, Math.sqrt(tan*tan+1)/2+60);}
else if (ang <= 55) {ctx.fillText(Math.sqrt(tan*tan+1)+"k",100, Math.sqrt(tan*tan+1)/2+60)}
else if (ang <= 77) {ctx.fillText(Math.sqrt(tan*tan+1)+"k",150, Math.sqrt(tan*tan+1)/2+40)}
else {ctx.fillText(Math.sqrt(tan*tan+1)+"k",100, Math.sqrt(tan*tan+1)/2+20)}
ctx.font = "14px Calibri";
ctx.fillText(ang+"\u00B0", 10, 10);
ctx.font = "25px Calibri";
ctx.fillText("sin"+ang+"\u00B0 : "+sin, 20, 280);
ctx.fillText("cos"+ang+"\u00B0 : "+cos, 20, 310);
ctx.fillText("tan"+ang+"\u00B0 : "+tan, 20, 340);
ctx.fillText("cosec"+ang+"\u00B0 : "+1/sin, 20, 370);
ctx.fillText("sec"+ang+"\u00B0 : "+1/cos, 20, 400);
ctx.fillText("cot"+ang+"\u00B0 : "+1/tan, 20, 430);
} else {
document.write("Hey idiot, whhich iidiot brrowserr you are using? No IE clan here!");
}
}
</script>
</head>
<body onload="draw();">
<canvas id="draw" width="600" height="600"></canvas>
</body></html>
1）为什么要加一条线[k线附近，非直线，端点靠近角度]出现？我很确定这是由于我使用了 arc（）方法显示角度吗？我该如何以最简单的方式消除这种情况？
1) Why an extra line [near the k line, the unstraight line, with the endpoints near the angles] is appearing? I'm pretty sure this due to the arc() method I employ to display the angle? How do I eliminate that in the easiest way?
2）首先，任何人都可以确认所形成的三角形是正确的。其次，我遇到一些类似45degree的问题，该问题显示0.999999 ...不是1.如何解决？
2) First of all can anyone confirm that the triangle being made is correct. And secondly I have problems with some like 45degree which displays 0.999999... not 1. How to fix?
推荐答案
-
要修复多余的行，请添加：
To fix the extra line, add:
ctx.moveTo(20,50);
之前：
ctx.arc(20,20,30,Math.PI/2,Math.PI/2-(ang*Math.PI/180),true);
工作示例
（您正在从直角符号的末端到弧的起点绘制一条线）
Working example
(You were drawing a line from the end of the "Right angle" symbol, to the start of the arc)
该三角形似乎构造正确，一个45度角返回一个三角形，该三角形的宽度应尽可能大。我没看到您提到的 0.9999999 。
The Triangle seems to be constructed correctly, a 45 degree angle returns a triangle that's as high as it is wide, like it should. I'm not seeing the 0.9999999 you mention.
这篇关于在Canvas中使用arc（）方法增加多余的线条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
