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>