使用 canvas quadraticCurveTo() 绘制一个曲线统计图

好的，以下是使用 `quadraticCurveTo()` 方法绘制一个简单的曲线统计图的示例代码：

HTML 代码：

<canvas id="myCanvas" width="400" height="300"></canvas>

JavaScript 代码：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 绘制坐标轴
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 250);
ctx.lineTo(370, 250);
ctx.stroke();

// 绘制曲线
ctx.beginPath();
ctx.moveTo(40, 240);
ctx.quadraticCurveTo(80, 200, 120, 220);
ctx.quadraticCurveTo(160, 240, 200, 200);
ctx.quadraticCurveTo(240, 160, 280, 180);
ctx.quadraticCurveTo(320, 200, 360, 160);
ctx.strokeStyle = "blue";
ctx.lineWidth = 2;
ctx.stroke();

// 绘制曲线下方的阴影区域
ctx.fillStyle = "rgba(0, 0, 255, 0.3)";
ctx.lineTo(360, 250);
ctx.lineTo(20, 250);
ctx.closePath();
ctx.fill();

// 绘制曲线上的数据点
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(40, 240, 4, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(120, 220, 4, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(200, 200, 4, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(280, 180, 4, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(360, 160, 4, 0, 2 * Math.PI);
ctx.fill();

// 绘制曲线上的数据点的数值
ctx.fillStyle = "black";
ctx.font = "12px Arial";
ctx.fillText("10", 34, 255);
ctx.fillText("20", 114, 235);
ctx.fillText("30", 194, 215);
ctx.fillText("40", 274, 195);
ctx.fillText("50", 354, 175);

这个示例代码绘制了一个带有曲线的简单统计图，数据点的数值显示在曲线上方。你可以根据需要修改数据点的位置和数值，以及曲线的颜色和宽度来适应不同的应用场景。