_动力学知识库

问题描述:

I draw a sine curve in html5 canvas. but the curve was much blurred. pls help me to resolve.

Fiddle

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

网友答案:

You are adding a new line segment in each iteration of the second for loop but you are also drawing the stroke for all previous segments, which results in the segments to be drawn multiple times. Call ctx.stroke() only once, after the loop.

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>