当前位置: 动力学知识库 > 问答 > 编程问答 >

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

问题描述:

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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: