JavaScript Canvas 创建正方形

Question

我想用如下函数绘制一个正方形。

如何修改以下函数来创建正方形。

function square() {

    var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
            context.beginPath();
            context.moveTo(ev._x, ev._y);
            tool.started = true;
    };

    this.mousemove = function (ev) {
        if (tool.started && checkboxSquare.checked) {
            context.lineTo(ev._x, ev._y);
            context.stroke();
        }
    };

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

Answer 1

这是一个返工:

var Square;
(function(Square) {
  var canvas = document.body.appendChild(document.createElement("canvas"));
  canvas.style.border = "1px solid";
  canvas.width = 800;
  canvas.height = 800;
  var context = canvas.getContext("2d");
  var drawing = false;
  var square = {
    x: 0,
    y: 0,
    w: 0,
    h: 0,
    color: getColor()
  };
  var persistentSquares = [];

  function getColor() {
    return "rgb(" +
      Math.round(Math.random() * 255) + ", " +
      Math.round(Math.random() * 255) + ", " +
      Math.round(Math.random() * 255) + ")";
  }

  function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    for (var pSquareIndex = 0; pSquareIndex < persistentSquares.length; pSquareIndex++) {
      var pSquare = persistentSquares[pSquareIndex];
      context.fillStyle = pSquare.color;
      context.fillRect(pSquare.x, pSquare.y, pSquare.w - pSquare.x, pSquare.h - pSquare.y);
      context.strokeRect(pSquare.x, pSquare.y, pSquare.w - pSquare.x, pSquare.h - pSquare.y);
    }
    context.strokeRect(square.x, square.y, square.w - square.x, square.h - square.y);
  }
  canvas.onmousedown = function(evt) {
    square.x = evt.offsetX;
    square.y = evt.offsetY;
    square.w = evt.offsetX;
    square.h = evt.offsetY;
    drawing = true;
    requestAnimationFrame(draw);
  };
  canvas.onmousemove = function(evt) {
    if (drawing) {
      square.w = evt.offsetX;
      square.h = evt.offsetY;
      requestAnimationFrame(draw);
    }
  };

  function leave(evt) {
    if (!drawing) {
      return;
    }
    square.w = evt.offsetX;
    square.h = evt.offsetY;
    drawing = false;
    persistentSquares.push(square);
    square = {
      x: 0,
      y: 0,
      w: 0,
      h: 0,
      color: getColor()
    };
    requestAnimationFrame(draw);
  };
  canvas.onmouseup = leave;
  canvas.onmouseleave = leave;
})(Square || (Square = {}));