The curve of the canvas is very blurry. i don't know why its blurry
I am drawing a sine curve in html5 canvas. but the curve was very blurry. Pls help me decide.
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();
}
+3
source to share
1 answer
You add a new line segment every iteration of the second loop for
, but you also draw a stroke for all previous segments, which results in the segments being 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>
+5
source to share