Question

我正在使用javascript中的Javascript图形库，我有一个绘制网格的函数，每个网格线都有一种颜色，而轴有另一种颜色。相关代码位于此jsfiddle http://jsfiddle.net/F5LPn/#run
被调用的主要方法是在底部，因为顶部必须加载。

var ctx=document.getElementById('canvas').getContext('2d');
ctx.line(0,0,5,5);
ctx.lineWidth=1;
ctx.setGraph(-10,10,-10,10,1,1);
ctx.drawGraph('lightgrey','black');
ctx.strokeStyle='pink';
ctx.line(0,0,5,5);

drawGraph方法使用此代码

CanvasRenderingContext2D.prototype.drawGraph=function(color,axiscolor){
alert('called!');
this.strokeStyle=color;
for(var i=this.xmin;i<=this.xmax;i+=this.xscl){
    this.line(i,this.xmin,i,this.xmax);
}
for(var j=this.ymin;j<=this.ymax;j+=this.yscl){
    this.line(this.ymin,j,this.ymax,j);
}
//  this.strokeStyle=axiscolor;
this.line(0,this.xmin,0,this.xmax);
this.line(this.ymin,0,this.ymax,0);
this.strokeStyle=color;
};

正如您所看到的，至少在我的浏览器中，即使在调用绘图之后将stroke风格设置为绿色，整个网格也会显示为绿色。我不知道为什么会发生这种情况

由于

Answer 1

您的问题是beginPath功能中没有line。所以你的网格实际上被绘制了两次;一次在浅灰色，一次在粉红色，因为在线路调用中，它仍然具有网格线的所有数据。

除此之外，您不应该向内置对象（特别是在库中）添加方法

Answer 2

实际上我无法运行你的代码 - 只绘制了图形容器矩形 - 但我通常这样做是为了在绘图时切换颜色：

ctx.strokeStyle = "colorValue";
ctx.beginPath();
ctx.moveTo(sx, sy);
ctx.lineTo(ex, ey);
ctx.stroke();

然后再说：

ctx.strokeStyle = "colorValue";
ctx.beginPath();
ctx.moveTo(sx, sy);
ctx.lineTo(ex, ey);
ctx.stroke();

画布中strokeStyle的意外行为

2 个答案: