使用 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) 首先，任何人都可以确认正在制作的三角形是正确的.其次，我遇到了一些问题，比如 45 度，它显示 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屋！
