在画布中使用arc()方法的多余多余线条 函数绘图(){ var canvas=document.getElementById('draw'); if(canvas.getContext){ var ctx=canvas.getContext('2d'); var ang=提示(“度”) var sin=Math.sin(ang*Math.PI/180);var cos=Math.cos(ang*Math.PI/180);var tan=Math.tan(ang*Math.PI/180); 如果(ang==45){tan=1} ctx.beginPath() ctx.font=“18px Calibri”; ctx.fillStyle=“黑色”; ctx.fillText(“k”,5150); ctx.移动到(20,20) ctx.lineTo(20220年) ctx.lineTo(20+(200*tan),220); ctx.closePath() ctx.stroke() ctx.beginPath() ctx.moveTo(20210年) 如果(ang
要修复额外的行,请添加:在画布中使用arc()方法的多余多余线条 函数绘图(){ var canvas=document.getElementById('draw'); if(canvas.getContext){ var ctx=canvas.getContext('2d'); var ang=提示(“度”) var sin=Math.sin(ang*Math.PI/180);var cos=Math.cos(ang*Math.PI/180);var tan=Math.tan(ang*Math.PI/180); 如果(ang==45){tan=1} ctx.beginPath() ctx.font=“18px Calibri”; ctx.fillStyle=“黑色”; ctx.fillText(“k”,5150); ctx.移动到(20,20) ctx.lineTo(20220年) ctx.lineTo(20+(200*tan),220); ctx.closePath() ctx.stroke() ctx.beginPath() ctx.moveTo(20210年) 如果(ang,canvas,html5-canvas,Canvas,Html5 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(a
<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>
之前:
ctx.moveTo(20,50);
(您正在从“直角”符号的末端到圆弧的起点绘制一条线)
0.999999
这是因为专门为45度进行了编辑[参见代码]是1,但对于其他的,比如30度,看到sin30的值。你能验证所做的三角形在长度比上是正确的吗,因为当我用标尺测量45度三角形的一侧时,看起来多了大约1厘米。啊,我明白了,这是JavaScript弄乱了圆整度。你对此无能为力,我是afraid.我复制粘贴了一个45度三角形的屏幕截图来绘制,裁剪了它,短边的长度正好是201像素。看起来还可以。我看到90度显示的值是错误的!而且是一个非常奇怪的数字。我知道,但是三角比率应该是正确的,这是错误的!
ctx.arc(20,20,30,Math.PI/2,Math.PI/2-(ang*Math.PI/180),true);