html5 - lineTo 画出来的线有锯齿,怎么样才能平滑一些-PHP中文网问答

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<canvas id="a" width="1300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas><br/>

<canvas id="b" width="1300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas><br/>
<script>

var data=[111, 21, 51, 71, 51, 31, 101, 31, 31, 51, 1, 11, 131, 61, 11, 141, 121, 111, 11, 1, 111, 71, 141, 141, 91, 131, 81, 21, 31, 71, 141, 41, 11, 31, 61, 11, 61, 101, 91, 21, 81, 141, 51, 91, 61, 71, 81, 91, 21, 21];
var a=document.getElementById("a").getContext("2d");
var b=document.getElementById("b").getContext("2d");

var interval=30;
a.strokeStyle='darkgreen';
for(var i=1;i<data.length-1;i++){
a.moveTo((i-1)*interval,150-data[i-1]);

a.lineTo(i*interval,150-data[i]);

a.stroke();
}

b.strokeStyle='firebrick';
b.beginPath();
for(var i=1;i<data.length-1;i++){
b.moveTo((i-1)*interval,150-data[i-1]);

b.quadraticCurveTo((i+1)*interval,150-data[i+1],(i)*interval,150-data[i]);

b.stroke();
}

</script> 

</body>
</html>

lineTo 画出来的线有锯齿,如果用quadraticCurveTo 这个控制点怎么算才能平滑一点?