JS前端使用canvas动态绘制函数曲线示例详解

JS canvas绘制函数曲线 JS canvas 2022-11-13 14:11:37 220人浏览独家记忆

摘要

目录前言第一步：绘制坐标系1、如何确定 x 轴和 y 轴的边界值2、不是传入多少网格数就是多少网格3、如何让坐标原点位于画布中心4、刻度总是会有浮点数第二步：画函数曲线第三步：绘制辅

前言

不说废话，我们直入主题。先来看看读了这篇文章你将得到什么，就是下面这个东西啦?（是不是很清晰很顺滑）：

那具体要做什么呢，我们来简单拆解一下步骤：

绘制坐标系
绘制多条函数曲线
绘制辅助线和坐标点
支持平移、缩放
支持动态绘制曲线
使之高清下面就来一一攻克它们，如果你在电脑前可以顺便瞅瞅示例代码（传送门），不依赖任何库哦。

第一步：绘制坐标系

既然我们要画函数，那肯定要先搞一个坐标系啦，也就是网格。大家可能都知道怎么画网格，就是横的画几条、竖的画几条。思路是没错，但是具体画起来要考虑的问题还是有很多的。画一个不动的、没有要求的网格很简单，但加了刻度后就不那么容易了。这里我就直接说下会遇到的一些问题吧！

1、如何确定 x 轴和 y 轴的边界值

这个东西很重要，是接下来所有一切操作的开端，因为我们画的是函数，一定要有个 x 轴的边界（当做参数传进来），那 y 轴呢，一般我们的网格都是正方形，所以这里让 y 轴的取值范围跟 x 轴一致即可。如果你不传 x 轴的两个边界值（lefxX、rightX），那我们会给个默认值[-canvas宽度的一半/100, canvas宽度的一半/100]，因为一般画布的宽高都是几百，所以这里就简单的除以 100，你要除以 10 也是 ok 的。再次强调一下边界值这个东西很重要，因为接下来的操作都是基于边界值来绘制的。不信你可以尝试一下没有边界值的情况，那可能会无从下手?。

2、不是传入多少网格数就是多少网格

因为网格刻度是需要骚微取整的，比如 10、5、1、0.5、0.2、0.1 这样。什么意思呢，举个具体的例子?，比如 x 轴的取值范围是 (-5,5)，网格的数量是10，那刚好就可以有 10 个网格，这样刻度就会挺整的（-5,-4,-3这样）；如果网格数是9，那么我们也会有10个网格，刻度也是（-5,-4,-3这样），而不是（-5,-3.9,-2.8），不知道大家 get 到木有。所以网格大小是要稍微计算一下的，算是个小小的算法，下面是其中的一种解法??：


calcGridSize(len: number, gridCount: number): number[] {
    let gridWidth = 1;
    // 应该保留几位小数，避免浮点数
    let fixedCount = 0;
    // 事实上，要是图方便的话，你也可以直接用 unitX 来当做网格大小，不过记得要取整
    let unitX = len / gridCount;
    // 而这里呢，我们需要找到离 unitX 最近的（稍微偏整数的）值
    // 首先要找到离 unitX 最近的 10 的整数倍，如 0.01、0.1、1、10、100
    while (gridWidth < unitX) {
        gridWidth *= 10
    }
    while (gridWidth / 10 > unitX) {
        gridWidth /= 10
        fixedCount++;
    }
    // 看看能不能再划分一次，如（/5 得到 0.02、0.2、20）、（/2 得到 0.05、5、50）
    if (gridWidth / 5 > unitX) {
        gridWidth /= 5;
        fixedCount++;
    } else if (gridWidth / 2 > unitX) {
        gridWidth /= 2;
        fixedCount++;
    }
    // 因为 x 轴长度和 y 轴的长度是一样的，所以可以这样赋值
    return [gridWidth, gridWidth, fixedCount];
}

3、如何让坐标原点位于画布中心

这个比较抽象，所以我们看图。我们不要这样（注意看四周的网格）：

我们要这样（注意看四周的网格，再和上图对比一下）：

不知道大家 get 到木有，其实你可以从中间开始往上下、往左右画网格，不过这里我们还是从左到右画就行（做点简单的数学运算），直接看代码应该会清晰点，而且我还配了图?：

drawGrid() {
    const { width, height, leftX, rightX, leftY, rightY, xLen, yLen, gridCount, ctx2d } = this;
    ctx2d?.save();
    // 注意这里我们是将网格数作为配置项，而不是网格的宽高大小
    const [gridWidth, gridHeight, fixedCount] = this.calcGridSize(xLen, gridCount);
    // 由于计算会产生浮点数偏差，所以要控制下小数点后面的数字个数
    this.fixedCount = fixedCount;
    // 从左到右绘制竖线
    for (let i = Math.floor(leftX / gridWidth); i * gridWidth < rightX; i++) {
        // 绘制像素点 / 整个画布宽度 = 实际 x 值 / 实际表示的 x 轴长度
        const x = (i * gridWidth - leftX) / xLen * width;
        // i = 0 就说明是 y 轴，颜色加深
        const color = i ? '#DDD' : '#000';
        this.drawLine(x, 0, x, height, color)
        this.fillText(String(this.fORMatNum(i * gridWidth, this.fixedCount)), x, height, this.fontSize, TextAlign.Center);
    }
    // 绘制横线也是和上面一样的方法，就是要注意画布的 y 轴向下，需要用 height 减一下，或者用 scale(1, -1);
    for (let j = Math.floor(leftY / gridHeight); j * gridHeight < rightY; j++) {
        let y = (j * gridWidth - leftY) / yLen * height;
        y = height - y;
        const color = j ? '#ddd' : '#000';
        this.drawLine(0, y, width, y, color);
        this.fillText(String(this.formatNum(j * gridHeight, this.fixedCount)), 0, y, this.fontSize, TextAlign.Middle);
    }
    ctx2d?.restore();
}
// 保留 fixedCount 位小数，整数不补零
formatNum(num: number, fixedCount: number): number {
    return parseFloat(num.toFixed(fixedCount));
}

另外简单说下为什么刻度要画在边上呢，不画在轴上，因为只要你骚微移动或者放大下画布，坐标轴就不在视线范围内了，刻度也就看不见了，所以不如一开始就放边上。

4、刻度总是会有浮点数

刻度和坐标点这种东西总是要做些加减乘除的运算，自然而然就会遇到我们前端知名的浮点数问题，所以这个是需要处理一下的，比如保留几位小数。当然关于浮点数的运算是有库可以用的，大致的思路分为两种：

变成整数在计算（先把数字都乘以10的n次方，最后除以10的n次方）
变成字符串来计算（类似于小学数学的计算方式，比如乘法，与个位、十位、百位...分别相乘再相加）

第二步：画函数曲线

画函数曲线的思路很直白，就是以直代曲，将多个点用线连起来就行了，我们会先通过 y = fn(x) (fn 大概长这样 sin(x)、1 / x 这样)来算出函数的坐标点，然后将函数的坐标点换算成画布上的点，最后绘制出来。下面是一些要小小注意的点：

点越多画出来的曲线就越平滑，这里我们可以通过参数 steps 来控制，默认值为 1。
计算出来的点可以不需要保存下来，因为你一移动、缩放，值就全变了。
记得在绘制每条函数开始前 beginPath 一下，否则会影响到下一条曲线的绘制（比如颜色、线宽）。
对于画布外的点我们是不需要绘制的，直接用 moveTo 即可（但不是用 continue 跳过）。


drawFn() {
    const { width, height, leftX, leftY, xLen, yLen, steps, ctx2d } = this;
    if (!ctx2d) return;
    ctx2d.save();
    this.fnList.forEach(fn => {
        ctx2d.strokeStyle = (fn as any).color;
        ctx2d.beginPath();
        for (let i = 0; i < width; i += steps) {
            // 小小的公式推导：像素点 / 画布宽 = x / 实际表示的 x 轴长度
            const x = i / width * xLen + leftX;
            let y = fn(x);
            if (isNaN(y)) continue;
            // 换算到具体绘制点
            y = height - (y - leftY) / yLen * height;
            // 在画布之外是不用绘制的所以用 moveTo 即可
            if (i === 0 || y > height || y < 0) {
                ctx2d.moveTo(i, y);
            } else {
                ctx2d.lineTo(i, y);
            }
        }
        ctx2d.stroke();
    });
    ctx2d.restore();
}

这里想强调一点的就是在绘制前后时刻记得要 save 和 restore，并且这两个方法要配对使用。我们都应该听过 canvas 是基于状态管理的，如果你想要画一条红色的线，我们需要把画笔设置成红色，不使用 save 和 restore 的话，这个红色会影响到接下来的所有操作，所以一般我们要养成下面这样的习惯（尤其是平移、旋转和缩放等操作，不然一脸懵逼不是梦?）：

// 初始状态
ctx2d.save();
// 在这里设置各种状态1
    ctx2d.save();
    // 在这里设置各种状态2
    ctx2d.restore();
// 这里是状态1
ctx2d.restore();
// 这里是初始状态

之所以可以嵌套使用是因为 canvas 使用了栈（只能 push 和 pop 的数组）的方式来管理状态，就像这样 [初始状态的集合、状态1的集合、状态2的集合]，save 就是将当前状态往数组末尾追加，restore 就是取出数组最后一项当做当前状态。而集合你可以理解成是一个大对象，里面有各种属性，形如 {strokeStyle, fillStyle, lineWidth} 这样。

第三步：绘制辅助线和交点坐标

这个很简单，首先我们能够知道鼠标相对于画布的坐标，然后换算成曲线的 x 值，代入每个函数中计算出一个 y 值，如果 y 是个有效值，那么就在点 [x, y] 处画个圆即可，记得数字都格式化一下的。

drawSubLine(canvasPos: Point) {
    const ctx2d: CanvasRenderinGContext2D | null = this.ctx2d;
    if (!ctx2d) return;
    const { width, height } = this;
    const { x, y } = canvasPos;
    // 先重新绘制网格和函数曲线
    this.draw();
    // 绘制辅助线
    ctx2d.save();
    this.drawLine(x, 0, x, height, '#999',true);
    this.drawLine(0, y, width, y, '#999', true);
    ctx2d.restore();
    // 绘制鼠标点
    const centerRectLen: number = 8;
    this.strokeRect(x - centerRectLen / 2, y - centerRectLen / 2, centerRectLen, centerRectLen);
    const actualPos = this.canvasPosToFnVal(canvasPos);
    // 绘制曲线和辅助线的交点坐标
    this.handleCrosspoint(actualPos.x);
}
handleCrosspoint(x: number) {
    const pointList: Point[] = this.checkCrosspoint(x);
    pointList.forEach(point => {
        const { x, y } = this.fnValToCanvasPos(point);
        this.fillCircle(x, y, 4, 'red');
        this.fillText(`[${this.formatNum(point.x, this.fixedCount + 1)}, ${this.formatNum(point.y, this.fixedCount + 1)}]`, x, y, this.fontSize);
    });
}

绘制辅助线的时候我们总是会先重新绘制网格和曲线，这个是可以优化的。我们可以进行分层处理，因为鼠标移动的时候，就只会改变辅助线和坐标点，所以我们可以将网格和函数曲线放在下层，辅助线和坐标点放在上层，这样每次绘制的时候只要重新绘制上层就可以了。

第四步：平移

首先肯定是要加个事件监听的：

this.canvas.addEventListener('mousedown', this.handleMouseDown.bind(this), false);
// 也可以把 mouseup 和 mousemove 这两个监听写在 mousedown 的回调中
document.addEventListener('mouseup', this.handleMouseUp.bind(this), false);
document.addEventListener('mousemove', this.handleMouseMove.bind(this), false);

平移应该是众多操作中最简单的一个，平移的结果就是改变了 x 轴和 y 轴的边界值，所以只需要重新计算出边界值，重新调用绘制函数即可。我们用 startPos 和 endPos 来计算平移的距离，就像下面这样：

// 返回距离画布左上角的点
viewportToCanvasPosition(e: MouseEvent): Point {
    const { clientX, clientY } = e;
    const { top, left } = this.canvas.getBoundingClientRect();
    const x = clientX - top;
    const y = clientY - left;
    return new Point(x, y);
}
// 记录鼠标按下的点
handleMouseDown(e: MouseEvent) {
    const canvasPos: Point = this.viewportToCanvasPosition(e);
    this.state.startPos = canvasPos;
}
// 计算平移距离，更新 leftX 和 rightX 的值，然后重新绘制
handleMouseMove(e: MouseEvent) {
    const canvasPos: Point = this.viewportToCanvasPosition(e);
    if (!this.state.startPos) return;
    document.body.style.cursor = 'move';
    this.state.endPos = canvasPos;
    const { width, height, xLen, yLen, state: { startPos, endPos } } = this;
    // 算出平移距离
    const dx = (endPos.x - startPos.x) / width * xLen;
    const dy = (endPos.y - startPos.y) / height * yLen;
    // 更新边界值
    this.leftX -= dx;
    this.rightX -= dx;
    this.leftY += dy;
    this.rightY += dy;
    this.xLen = this.rightX - this.leftX;
    this.yLen = this.rightY - this.leftY;
    this.draw();
    this.state.startPos = canvasPos;
}
// 还原拖拽前的状态
handleMouseUp(e: MouseEvent) {
    this.state.startPos = null;
    this.state.endPos = null;
    document.body.style.cursor = 'auto';
}

要注意的是如果我们往右平移，上面代码中的 dx 应该是正值，但刻度是减小的，所以计算的时候应该用减号，其它方向同理。

第五步：缩放

首先就是要监听滚轮事件：

this.canvas.addEventListener('mousewheel', this.handleMouseWheel.bind(this), false);

同样的，缩放的核心也是改变边界值，但是这个推导会比平移骚微麻烦一些，自己动手画个图会比较清晰点。另外和平移不一样的是，缩放应该是以当前点为中心进行缩放，并且是一边加一边减。啥意思呢？就是比如你在画布中心放大的时候，leftX 的值应该是增加的，rightX 应该是减少的。还有就是缩放应该要有个限制，无限大或者无限小都没啥太大意义。下面是代码和图的示例：

handleMouseWheel(e: Event) {
    e.preventDefault();
    const event: WheelEvent = e as WheelEvent;
    const canvasPos: Point = this.viewportToCanvasPosition(event);
    const { deltaY } = event;
    const { leftX, rightX, leftY, rightY } = this;
    const scale: number = deltaY > 0 ? 1.1 : 0.9;
    if (this.isInvalidVal(scale)) return;
    const { x, y } = this.canvasPosToFnVal(canvasPos);
    // 注意缩放和平移不一样，轴的左右两边一边是加一边是减
    this.leftX = x - (x - leftX) * scale;
    this.rightX = x + (rightX - x) * scale;
    this.leftY = y - (y - leftY) * scale;
    this.rightY = y + (rightY - y) * scale;
    this.xLen = this.rightX - this.leftX;
    this.yLen = this.rightY - this.leftY;
    this.draw();
}

isInvalidVal(ratio: number): boolean {
    const { xLen, yLen, MIN_DELTA, MAX_DELTA } = this;
    if (ratio > 1 && (xLen > MAX_DELTA || yLen > MAX_DELTA)) return true;
    if (ratio < 1 && (xLen < MIN_DELTA || yLen < MIN_DELTA)) return true;
    // 上面的判断为什么不直接 （xLen > MAX_DELTA || yLen > MAX_DELTA || xLen < MIN_DELTA || yLen < MIN_DELTA）这样判断呢？
    // 因为如果这样判断你会发现缩放到最大和最小的时候，再继续操作都是无效的。
    return false;
}
canvasPosToFnVal(canvasPos: Point): Point {
    const { width, height, leftX, leftY, xLen, yLen } = this;
    const x = leftX + canvasPos.x / width * xLen;
    const y = leftY + canvasPos.y / height * yLen;
    return new Point(x, y);
}