画布罪曲线很模糊.我不知道为什么它模糊了

Question

我在html5画布中绘制一条正弦曲线.但曲线很模糊.请帮我解决.

小提琴

  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();
                }

Answer 1

您正在第二个for循环的每次迭代中添加一个新的线段,但您还要为所有先前的线段绘制笔划,这会导致多次绘制线段.ctx.stroke()循环后只调用一次.

function DrawCurve() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
	
  var Wave = [];

  for (var 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 (var 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();
}

DrawCurve();

<canvas id="canvas" width="430" height="260"></canvas>