HTML Canvas 线颜色的奇怪行为

Question

所以我一直在研究 JavaScript 库，用于在 canvas 和 function 中绘制函数，以设置我遇到了一些非常奇怪的行为。 在某些地方， ctx.strokeStyle被更改为以不同的颜色绘制，但由于某种原因，每个 function 都使用一种颜色绘制，该颜色仅用于一个点。

 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 } // FOR SOME REASON EVERY SINGLE LINE IS THAT ^ COLOR } //ALSO IF YOU LOOK CLOSELY OR CHANGE IT TO BLACK YOU CAN SEE THE LINES SLIGHTLY FADE OUT AS MOVEING LEFT TO RIGHT, NO IDEA WHY drawline(x1, x2, y1, y2, w, c) { 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(); } } const graph1 = new chart(100, 100, 100, 100)

这是 JS Fiddle 上的整个脚本

您可以看到每条线都是灰色的，即使两条较宽的线应该是黑色的。

另一个问题是网格线是从左到右绘制的，它们由于某种原因变得越来越轻，不知道是什么原因造成的，因为每条线之间的宽度、颜色和 alpha 应该是相同的。

Answer 1

你只是在你的平局中错过了一个 beginPath ......
没有那个，应用的颜色是最后一个设置的颜色

请参阅下面的更正代码，现在 output 应如下所示：

 class chart { constructor(gnx, gx, gny, gy) { this.canvas = document.createElement("CANVAS"); document.body.appendChild(this.canvas); this.canvas.width = 200; this.canvas.height = 200; this.canvas.style = "border:1px solid #000000;"; this.ctx = this.canvas.getContext("2d"); 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(); } 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(); } 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 } } } const graph1 = new chart(100, 100, 100, 100)