Question

我正在使用canvas和java脚本，并且对烛台的线宽（股票市场分析）有疑问。

我调用这样绘制矩形的函数：

DrawRectangle(context0, x , y, w , h, '#fff','#000', false);

这是绘制矩形的函数：

function DrawRectangle(context0, x, y, w, h, color, border, fill) {     
  context0.fillStyle = color;
  context0.beginPath();
  context0.rect(x, y, w, h);
  context0.closePath();
  context0.lineWidth = 1;
  context0.strokeStyle = border;
  context0.stroke();
  if (fill) context0.fill();
}

通过最后一个参数，我定义是否应填充此矩形。我想使用WHITE颜色填充矩形。我将如何做到这一点：

DrawRectangle(context0, x , y, w , h, '#fff','#000', true);

问题是，一旦我使用它，线的宽度与其他线不同。

这是第一个结果（当我使用TRUE填充矩形时）：

enter image description here

这是第二次（当我使用FALSE时）

enter image description here

在第一种情况下，线宽不一样，我正在寻找合适的解决方案。

没有太多细节，烛台有上下阴影（线条）。我使用以下函数绘制：

function DrawLine(context0, startx, starty, endx, endy, color) {
  context0.beginPath();
  context0.moveTo(startx, starty);
  context0.lineTo(endx, endy);
  context0.closePath();
  context0.lineWidth = 1;
  context0.strokeStyle = color;
  context0.stroke();
}

在绘制烛台的函数中，我将此函数称为：

DrawLine(context0, x1 , y1 , x2 , y2 ,'#000');

正如您在context0.lineWidth = 1两种情况中所看到的那样，但这并没有给出相同的结果。我可以使用一个技巧，通过调用函数两次来完成它。像这样：

DrawRectangle(context0, x , y, w , h, '#fff','#000', true);
DrawRectangle(context0, x , y, w , h, '#fff','#000', false);

但我不喜欢这个解决方案（性能）。

还有其他想法吗？

HTML 5 Canvas - 绘制时的线宽

0 个答案: