Javascript 画布的正弦曲线非常模糊。我不知道为什么它模糊了

我在html5画布上画了一条正弦曲线。但这条曲线非常模糊。请帮我解决

var-Wave=[]；
对于（i=0；i在第二次
for
循环的每次迭代中，您都会添加一条新线段，但同时也会为所有以前的线段绘制笔划，这会导致多次绘制线段。在循环之后，只调用
ctx.stroke（）


函数DrawCurve（）{
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var波=[]；
对于（var i=0；i<6.28；i+=0.03）{
波推（[（i*（350/6.28）），130-（数学sin（i）*80）]；
}
ctx.beginPath（）；
ctx.moveTo（50+波[0][0]，波[0][1]）；
对于（var i=0；i<波长；i++）{
ctx.lineTo（50+波[i][0]，波[i][1]）；
ctx.strokeStyle=“红色”；
ctx.lineWidth=1.5；
ctx.lineJoin='round'；
}
ctx.stroke（）；
}
DrawCurve（）；
@InvernoMuto我已经看到了。同样的逻辑。我用过，但我不明白为什么这行模糊。非常感谢，亲爱的。很简单。我不明白。@新手有点粗鲁。
ctx.stroke（）；
现在在for循环之外，只调用一次。另外@chrisklaussner您不需要在循环中设置
stokeStyle
、
lineWidth
和
lineJoin
，因为这只需要设置一次，并且在
ctx.stroke（）时读取
被称为！@rorypicko你说得对。不过，这只是一个新手原始小提琴的复制粘贴
  var Wave=[];
        for(i=0;i<6.28;i+=0.03)
                {
            Wave.push([(i*(350/6.28)),130-(Math.sin(i)*80)]);
                }   
      ctx.beginPath();                  
      ctx.moveTo(50+Wave[0][0],Wave[0][1])
      for(i=0;i<Wave.length;i++)
                {
                ctx.lineTo(50+Wave[i][0],Wave[i][1]);
                ctx.strokeStyle="red";
                ctx.lineWidth=1.5;
                ctx.lineJoin = 'round';
                ctx.stroke();
                }