时间戳

首页 > 解决方案 > 用颜色填充随机大小的矩形时如何制作边框？

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

问题描述

我正在用 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？但我不知道如何避免这种情况发生？</p>

标签： javascripthtml5-canvas

解决方案

strokeRect()填写后需要调用：

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

推荐阅读