Canvas sin 曲线非常模糊。我不知道为什么它模糊

Question

我在html5canvas中画了一条正弦曲线。但曲线非常模糊。请帮我解决一下。

  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>

Canvas sin 曲线非常模糊。我不知道为什么它模糊

Canvas sin curve much blurred. i dont know why its blurred

html

javascript

css

jquery

canvas