Question

我正在尝试为图表的不同部分绘制不同颜色的折线图。

我在弄清楚如何绘制单个fillStyle和strokeStyle时遇到麻烦

附带注释的代码

const canvas = document.getElementById('test');
const ctx = canvas.getContext('2d');
const width = canvas.width = 1000;
const height = canvas.height = 500;
ctx.fillStyle = 'blue';

function plotPoints() {
  const pts = generatePoints(25);
  pts.forEach((pt, index, pointArray) => {
    drawCurvedLine(ctx, pt, index, pointArray)
  });

  ctx.stroke();

  const maxY = Math.max.apply(null, pts.map(pt => pt.y));
  ctx.lineTo(pts[pts.length - 1].x, maxY);
  ctx.lineTo(pts[0].x, maxY);
  // Area Color
  ctx.fillStyle = 'rgba(255, 148, 136, .6)';
  ctx.fill();


}
plotPoints();

function generatePoints(nbOfPoints) {
  const pts = [];
  for (let i = 0; i <= nbOfPoints; i++) {
    pts.push({
      x: i * (width / nbOfPoints),
      y: Math.random() * height
    });
  }
  return pts;
}

function drawCurvedLine(ctx, point, index, pointArray) {
  if (typeof pointArray[index + 1] !== 'undefined') {
    var x_mid = (point.x + pointArray[index + 1].x) / 2;
    var y_mid = (point.y + pointArray[index + 1].y) / 2;
    var cp_x1 = (x_mid + point.x) / 2;
    var cp_x2 = (x_mid + pointArray[index + 1].x) / 2;
    // Point fill color crimson
    // Point stroke style blue for example
    ctx.fillStyle = 'crimson';
    ctx.strokeStyle = 'blue';
    ctx.arc(point.x, point.y, 10, 2 * Math.PI, false);
    // ctx.stroke();
    // ctx.fill();
    ctx.quadraticCurveTo(cp_x1, point.y, x_mid, y_mid);
    ctx.quadraticCurveTo(cp_x2, pointArray[index + 1].y, pointArray[index + 1].x, pointArray[index + 1].y);
    // Line stroke style  salmon
    ctx.strokeStyle = 'salmon';
    ctx.lineWidth = 5;

  }
}

<canvas id="test"></canvas>

非常感谢您的帮助。

Answer 1

在绘制到画布上时，您需要使用ctx.beginPath(); ...

以下是您采用不同方法的摘录：

const canvas = document.getElementById('test');
const ctx = canvas.getContext('2d');
const width = canvas.width = 600;
const height = canvas.height = 250;
plotPoints();

function plotPoints() {
    const pts = generatePoints(50);
    ctx.strokeStyle = 'salmon';
    ctx.fillStyle = 'rgba(255, 148, 136, .6)';
    ctx.lineWidth = 5;

    ctx.beginPath();
    pts.forEach((pt, index, pointArray) => {
        drawCurvedLine(pt, pointArray[index + 1])
    });
    ctx.fill();
    ctx.stroke();

    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    for (i = 5; i < pts.length-5; i++) {
        ctx.beginPath();
        ctx.fillStyle = 'rgba(0,'+ pts[i].y +','+ pts[i].x/2 +')';
        ctx.arc(pts[i].x, pts[i].y, 5, 2 * Math.PI, false)
        ctx.stroke();
        ctx.fill();
    }
}

function generatePoints(nbOfPoints) {
    const pts = [{x:0, y: height}];
    for (let i = 0; i <= nbOfPoints; i++) {
        pts.push({x: i * (width / nbOfPoints), y: Math.sin(i/2.6) * height/3 + 100});
    }
    pts.push({x:width, y: height});
    return pts;
}

function drawCurvedLine(point, next) {
    if (typeof next !== 'undefined') {
        var x_mid = (point.x + next.x) / 2;
        var y_mid = (point.y + next.y) / 2;
        var cp_x1 = (x_mid + point.x) / 2;
        var cp_x2 = (x_mid + next.x) / 2;

        ctx.quadraticCurveTo(cp_x1, point.y, x_mid, y_mid);
        ctx.quadraticCurveTo(cp_x2, next.y, next.x, next.y);
    }
}

<canvas id="test"></canvas>

画布填充区域并在图表中圈出

1 个答案: