在画布上绘制三角肌曲线

Question

https://jsfiddle.net/prew217o/

如您所见，我尝试将三角肌公式转换为代码，但为什么它不起作用？我想知道我做错了什么，因为公式与维基百科文章中的公式完全相同。

const ctx = document.getElementById("myCanvas").getContext("2d");
ctx.translate(150, 75);
var t = 0;
var a = 100;
var b = 80;
function y(t) { 
return (b-a) * Math.cos(t) + Math.acos(((b-a) / a) * t);
}
function x(t) { 
return (b-a) * Math.sin(t) - Math.asin(((b-a) / a) * t);
}
var nx = 0;
var ny = 0;
function animate() {
t += 0.1;
ctx.beginPath();
ctx.moveTo(nx, ny);
ctx.lineTo(x(t), y(t));
ctx.stroke();
nx = x(t);
ny = y(t);
console.log(ny)
requestAnimationFrame(animate);
}
animate();

Answer 1

您使用的是arcsin和arccos，而不是a * sin和a * cos。像这样更改代码以获得实际上看起来像三角曲线的曲线：

var a = 20;
var b = 3 * a;
function x(t) { 
return (b-a) * Math.cos(t) + a * Math.cos(((b-a) / a) * t);
}
function y(t) { 
return (b-a) * Math.sin(t) - a * Math.sin(((b-a) / a) * t);
}

链接到小提琴

PS：维基百科文章使用了b = 3 * a.我在小提琴中使用了相同的内容。