在html画布上绘制负值和正值区域

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

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

var negativeValues = [-10, -5, -8, -3, -6];
var positiveValues = [5, 8, 3, 6, 10];

var startX = 50; // 起始X坐标
var endX = canvas.width - 50; // 结束X坐标
var startY = canvas.height / 2; // Y轴中心坐标

ctx.beginPath();
ctx.moveTo(startX, startY);

for (var i = 0; i < negativeValues.length; i++) {
  var x = startX + (endX - startX) * (i / (negativeValues.length - 1));
  var y = startY - negativeValues[i];
  ctx.lineTo(x, y);
}

ctx.lineTo(endX, startY);
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill();

ctx.beginPath();
ctx.moveTo(startX, startY);

for (var i = 0; i < positiveValues.length; i++) {
  var x = startX + (endX - startX) * (i / (positiveValues.length - 1));
  var y = startY - positiveValues[i];
  ctx.lineTo(x, y);
}

ctx.lineTo(endX, startY);
ctx.closePath();
ctx.fillStyle = "green";
ctx.fill();

ctx.beginPath();
ctx.moveTo(startX, 0);
ctx.lineTo(startX, canvas.height);
ctx.moveTo(endX, 0);
ctx.lineTo(endX, canvas.height);
ctx.strokeStyle = "black";
ctx.stroke();