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

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。

以下是示例代码和演示：

＆＃13;

＆＃13;

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';

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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();
}

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

// 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();

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