如何在pixi.js/H5 Canvas绘制平滑曲线？求简易方案或第三方库

一、原生HTML5 Canvas实现 #

对于有明确函数表达式的曲线，直接生成足够多的采样点并连线就能得到平滑效果，无需额外插值算法。具体实现如下：

// 获取Canvas元素与绘图上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 设置Canvas画布尺寸
canvas.width = 400;
canvas.height = 300;

// 定义曲线参数：x的取值范围、采样点数
const xMin = -2;
const xMax = 2;
const pointCount = 100;
const step = (xMax - xMin) / pointCount;

// 坐标转换函数：将数学坐标系转为Canvas坐标系（Canvas原点在左上角）
function transformX(x) {
  // 把x从[-2,2]映射到Canvas的[50, 350]区域（保留左右边距）
  return ((x - xMin) / (xMax - xMin)) * (canvas.width - 100) + 50;
}

function transformY(y) {
  // 反转y轴方向，把y从[0,4]映射到Canvas的[250, 50]区域（保留上下边距）
  return canvas.height - ((y / 4) * (canvas.height - 100) + 50);
}

// 开始绘制曲线路径
ctx.beginPath();
for (let i = 0; i <= pointCount; i++) {
  const x = xMin + i * step;
  const y = x ** 2;
  const canvasX = transformX(x);
  const canvasY = transformY(y);
  
  i === 0 ? ctx.moveTo(canvasX, canvasY) : ctx.lineTo(canvasX, canvasY);
}

// 设置线条样式并完成绘制
ctx.strokeStyle = '#2196F3';
ctx.lineWidth = 2;
ctx.stroke();

二、PixiJS实现 #

PixiJS基于WebGL渲染，适合需要高性能或动画效果的场景，同样通过生成采样点连线的方式绘制曲线：

// 初始化Pixi应用实例
const app = new PIXI.Application({ width: 400, height: 300 });
document.body.appendChild(app.view);

// 创建绘图图形对象
const graphics = new PIXI.Graphics();
app.stage.addChild(graphics);

// 定义曲线参数
const xMin = -2;
const xMax = 2;
const pointCount = 100;
const step = (xMax - xMin) / pointCount;

// 坐标转换函数
function transformX(x) {
  return ((x - xMin) / (xMax - xMin)) * (app.screen.width - 100) + 50;
}

function transformY(y) {
  return app.screen.height - ((y / 4) * (app.screen.height - 100) + 50);
}

// 设置线条样式并绘制曲线
graphics.lineStyle(2, 0x2196F3);
let isFirstPoint = true;
for (let i = 0; i <= pointCount; i++) {
  const x = xMin + i * step;
  const y = x ** 2;
  const pixiX = transformX(x);
  const pixiY = transformY(y);
  
  if (isFirstPoint) {
    graphics.moveTo(pixiX, pixiY);
    isFirstPoint = false;
  } else {
    graphics.lineTo(pixiX, pixiY);
  }
}

三、第三方JS绘图库推荐 #

1. Chart.js #

如果需要快速生成带坐标轴、图例的专业图表，Chart.js是最优选择，无需手动处理坐标转换与样式：

// 生成曲线采样数据
const xMin = -2;
const xMax = 2;
const pointCount = 100;
const step = (xMax - xMin) / pointCount;
const chartData = {
  labels: Array.from({ length: pointCount + 1 }, (_, i) => (xMin + i * step).toFixed(2)),
  datasets: [{
    label: 'y = x²',
    data: Array.from({ length: pointCount + 1 }, (_, i) => {
      const x = xMin + i * step;
      return x ** 2;
    }),
    borderColor: '#2196F3',
    fill: false,
    tension: 0.1 // 可选：轻微优化平滑度，函数曲线本身已平滑，设为0也可
  }]
};

// 初始化折线图
new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: chartData,
  options: {
    scales: {
      x: { title: { display: true, text: 'X' } },
      y: { title: { display: true, text: 'Y' } }
    }
  }
});

2. D3.js #

适合定制化需求高的场景，能精确控制可视化的每一个细节，支持复杂交互与动画，绘制函数曲线的灵活性极强。

内容的提问来源于stack exchange，提问作者Charles Bao