HTML Canvas绘图线条颜色异常与线条渐变变淡问题求助

嘿，我一眼就揪出这两个问题的根源了——都是Canvas路径绘制的「累积特性」在搞鬼！咱们一个个拆解：

问题1：所有线条都变成灰色 #

你每次调用drawline时，没有启动新的独立路径。Canvas的2D上下文会把所有moveTo和lineTo的指令都累积到同一个路径里，每次执行stroke()的时候，会把整个路径里的所有线条重新画一遍。

你先画了黑色的坐标轴，然后循环画灰色的网格线——每画一条网格线，stroke()都会把之前的坐标轴、所有已画的网格线一起用当前的灰色重新绘制一遍。到最后，所有线条自然都被覆盖成灰色了！

问题2：网格线从左到右逐渐变淡 #

还是路径累积的锅！左边的网格线（比如i=10那条）会在后续每一次循环的stroke()中被重复绘制，次数越多颜色越厚重；而最右边的网格线（i=90那条）只被绘制一次，所以看起来从左到右越来越淡。

修复方案 #

只需要在drawline方法里，每次绘制新线条前调用beginPath()，让每一条线都成为独立的路径，就不会互相干扰了：

var chartCount = 0;
class chart {
    constructor(gnx, gx, gny, gy) {
        this.canvas = document.createElement("CANVAS");
        document.body.appendChild(this.canvas);
        this.canvas.width = 400;
        this.canvas.height = 400;
        this.canvas.style = "border:1px solid #000000;";
        this.ctx = this.canvas.getContext("2d");
        this.id = "htmlCanvasGraph#" + chartCount;
        chartCount++;
        this.gnx = gnx;
        this.gx = gx;
        this.gny = gny;
        this.gy = gy;
        this.ry = this.canvas.height / (this.gny + this.gy);
        this.rx = this.canvas.width / (this.gnx + this.gx);
        this.outline();
    }
    cx(x) { //convert a graph value to a canvas value
        return (x + this.gnx) * this.rx;
    }
    cy(y) { //convert a graph value to a canvas value
        return this.canvas.height - (y + this.gny) * this.ry;
    }
    outline() { //creates the axis and graph lines
        this.drawline(0 - this.gnx, this.gx, 0, 0, 3, "#000000"); //BLACK
        this.drawline(0, 0, 0 - this.gny, this.gy, 3, "#000000");
        var i = 0;
        while (i < this.gx) { //quadrants 1 and 4
            i += 10;
            this.drawline(i, i, this.gy, -1 * this.gny, 1, "#808080"); //GREY
        }
    }
    drawline(x1, x2, y1, y2, w, c) {
        this.ctx.beginPath(); // 新增这一行，启动独立路径
        this.ctx.lineWidth = w;
        this.ctx.strokeStyle = c;
        this.ctx.moveTo(this.cx(x1), this.cy(y1));
        this.ctx.lineTo(this.cx(x2), this.cy(y2));
        this.ctx.stroke();
        this.ctx.closePath(); // 可选，清理路径上下文，避免意外累积
    }
}
const graph1 = new chart(100, 100, 100, 100)

你试试这个修改后的代码，坐标轴会变回黑色，网格线也不会再出现渐变变淡的问题啦！

内容的提问来源于stack exchange，提问作者Benjamin Kantor