Question

我正在用javascript制作一个非常基本的绘画程序。我已经准备好一些绘图工具，并且希望矩形周围有黑色边框。矩形填充有随机颜色。如何添加边框？

我尝试添加两个矩形。而且我尝试使用strokeStyle和lineWidth，但到目前为止还没有运气。

用随机颜色填充矩形的代码效果很好。

  tools.rect = function () {
    var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
      tool.started = true;
      tool.x0 = ev._x;
      tool.y0 = ev._y;
    };

    this.mousemove = function (ev) {
      if (!tool.started) {
        return;
      }

      var x = Math.min(ev._x,  tool.x0),
          y = Math.min(ev._y,  tool.y0),
          w = Math.abs(ev._x - tool.x0),
          h = Math.abs(ev._y - tool.y0);

      context.clearRect(0, 0, canvas.width, canvas.height);

      if (!w || !h) {
        return;
      }
      context.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
      context.fillRect(x, y, w, h);

    };

    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
        drawCanvas();
      }
    };
  };

但是当我尝试在context.fillRect之后添加这些行时...

context.strokeStyle = "#000";
context.lineWidth   = 3;

什么都没有发生。

我认为也许fillStyle和fillRect隐藏了strokeStyle和lineWidth吗？但是我不怎么避免这种情况的发生？

Answer 1

您需要在填写后致电strokeRect()：

(...)
context.fillRect(x, y, w, h);
context.strokeStyle = "#000";
context.lineWidth = 3;
context.strokeRect(x, y, w, h);

用颜色填充随机大小的矩形时，如何制作边框？

1 个答案: