渲染笛卡尔平面的颜色问题

Question

我想把中线设为红色。但是这样做会使所有在中线之后绘制的线都变成红色。

以下是我在 html5 Canvas 中制作图表的 JavaScript 代码：

var c = document.getElementById("myCanvas");// Accessing Canvas element 
var graph = c.getContext("2d");
var posX = 100;
var posY = 50;
var finalX = posX;
var finalY = posY;
c.width = window.innerWidth; // To make canvas fullsize
c.height = window.innerHeight; // To make canvas fullsize 

graph.strokeRect(100,50,1000,500)

while(finalY < 550)
{
    finalY +=10;
    graph.beginPath();
    graph.moveTo(posX , finalY);
    graph.lineTo(posX + 1000, finalY);
    graph.stroke();
}
while(finalX <1100)
{
    finalX += 10;
    graph.beginPath();
    graph.moveTo(finalX, posY);
    graph.lineTo(finalX, posY + 500);
    if(finalX == 600) // 600 is position for midline
    {
        graph.linewidth = 5;
        graph.strokeStyle = "#ff0000";

    }

    graph.stroke();
}

Answer 1

设置 strokeStyle 将持续存在。

如果您设置 strokeStyle='#ff0000' 那么之后的所有笔划都将是红色，直到您将 strokeStyle 重置为其他颜色。

在您的情况下，您可以将整个网格绘制为黑色，然后将中线绘制为红色。

顺便说一句，你在中线上打错了字：linewidth 必须是 lineWidth。

下面是示例代码和演示：

var c=document.getElementById("canvas");
var graph=canvas.getContext("2d");
var cw=c.width;
var ch=c.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }

var posX = 100;
var posY = 50;
var finalX = posX;
var finalY = posY;
c.width = window.innerWidth; // To make canvas fullsize
c.height = window.innerHeight; // To make canvas fullsize 

graph.strokeRect(100,50,1000,500)

while(finalY < 550)
{
  finalY +=10;
  graph.beginPath();
  graph.moveTo(posX , finalY);
  graph.lineTo(posX + 1000, finalY);
  graph.stroke();
}
while(finalX <1100)
{
  finalX += 10;
  graph.beginPath();
  graph.moveTo(finalX, posY);
  graph.lineTo(finalX, posY + 500);
  graph.stroke();
}

// draw midline
graph.beginPath();
graph.moveTo(posX+600, posY);
graph.lineTo(posX+600,finalY);
graph.lineWidth = 5;
graph.strokeStyle = "#ff0000";
graph.stroke();
graph.lineWidth=1;
graph.strokeStyle='black';

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>

Answer 2

作为一种简单的方法，您可以通过切换位置来解决此问题，例如：

...
while(finalX <1100)
{
    finalX += 10;
    graph.beginPath();
    graph.moveTo(finalX, posY);
    graph.lineTo(finalX, posY + 500);

    if(finalX === 600) // 600 is position for midline
    {
        graph.linewidth = 5;
        graph.strokeStyle = "#ff0000";
    }
    else {    // in all other cases, black and width=1
        graph.linewidth = 1;
        graph.strokeStyle = "#000";
    }

    graph.stroke();
}

但是，为了提高性能，您还可以在 post 中绘制单线。这将允许您优化流程并通过将所有线条添加到同一路径和一次描边来利用路径。然后只处理最后的红线：

// add all lines
graph.beginPath();
while(finalY < 550) {
    finalY +=10;
    graph.moveTo(posX , finalY);
    graph.lineTo(posX + 1000, finalY);
}
while(finalX <1100) {
    finalX += 10;
    graph.moveTo(finalX, posY);
    graph.lineTo(finalX, posY + 500);
}
graph.stroke();   // stroke all black lines at once

// draw red line on top on a new path
graph.beginPath()
graph.moveTo(600, posY);
graph.lineTo(600, posY + 500);
graph.linewidth = 5;
graph.strokeStyle = "#ff0000";
graph.stroke();

设置样式始终适用于下一个 fill/stroke 操作以及当前路径上的所有内容。要使用单独的颜色绘制，需要一个新路径。

渲染笛卡尔平面的颜色问题

Color issue rendering a Cartesian Plane

javascript

graph

html5-canvas