温馨提示:本文翻译自stackoverflow.com，查看原文请点击：html - drawing sine wave in canvas
html - 在画布上绘制正弦波
发布于 2021-03-16 08:26:34
我想在画布上绘制一个简单的正弦波，但是我做得不好。如图所示，这是我想要的输出。
到目前为止，我得到的是http://jsfiddle.net/RaoBurugula/gmhg61s6/4/
的HTML
<canvas id="myCanvas" width="360" height="360" style="border:1px solid #d3d3d3;">
JS
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i;
for(i=0; i<360; i+= 20){
ctx.moveTo(i+5,180);
ctx.lineTo(i,180);
}
ctx.stroke();
var counter = 0, x=0,y=180;
//100 iterations
var increase = 90/180*Math.PI ;
for(i=0; i<=180; i+=10){
ctx.moveTo(x,y);
x = i;
y= 180 - Math.sin(counter);
counter += increase;
ctx.lineTo(x,y);
alert( " x : " + x + " y : " + y) ;
}
ctx.stroke();
我想要的输出
提问者
BRDroid
被浏览
0
嗨，Guffa，如果我想添加超时以逐步查看其绘制方式。我怎样才能做到这一点。谢谢
@Rao：您可以使用一个调用自身
setTimeout而不是循环的函数：jsfiddle.net/Guffa/gmhg61s6/9@Guffa太好了！它帮助我创建了我的游戏，但我也尝试为曲线创建动画，有什么想法可以实现这一目标吗？