JavaScript

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > JS canvas绘制函数曲线

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

作者:尤水就下

这篇文章主要为大家介绍了JS前端使用canvas画函数曲线的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前言

不说废话,我们直入主题。先来看看读了这篇文章你将得到什么,就是下面这个东西啦👇(是不是很清晰很顺滑):

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

第一步:绘制坐标系

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

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 到木有。所以网格大小是要稍微计算一下的,算是个小小的算法,下面是其中的一种解法👇🏻:

/**
 * 计算每一个网格的宽高大小,注意并不是 gridCount 是多少就会有多少网格
 * 因为我们的坐标刻度通常都是 10、5、1、0.5、0.1 这个样子,大部分都是以 2、5、10 的倍数
 * @param len x 或 y 轴代表的长度
 * @param gridCount 网格个数
 */
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、刻度总是会有浮点数

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

第二步:画函数曲线

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

/** 绘制函数曲线,就是用一段段直线连起来 */
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);
}

第六步:动态绘制曲线

既然你已经会画函数曲线了,那动态绘制也不在话下。就是用 requestAnimationFrame、setTimeout 或者 setInterval 一次画一段,绘制的快慢可以通过调整时间参数或者每次画多段来调整,然后有以下几个注意点:

第七步:模糊到高清

其实写到最后你会发现曲线好像有点模糊,事实上整个画布都会有点模糊,这在 canvas 中是个很常见的问题,以上就是JS前端使用canvas动态绘制函数曲线示例详解的详细内容,更多关于JS canvas绘制函数曲线的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文