极客观点
项目管理
HarmonyOS
<!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 这个控制点怎么算才能平滑一点?
html5
虽然不知为何，但是把
a.stroke()移到循环外即可让线变正常点。大概是你需要保证每个 path 只被 stroke 一次，而若需要新的 path，就要调用 beginPath（或者 closePath 如果适合的话）。