如何在另一个矩形内绘制一个矩形

Question

我得到了一个基于用户输入的代码，它绘制了一个矩形。 我需要在第一个矩形中创建另一个矩形，如下图所示。

https://imgur.com/zbMNXFv

到目前为止，我得到了以下代码。 https://codepen.io/newtz/pen/MWWKRYG

    function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);

  context.beginPath();
  context.strokeRect(zoomedX(50), zoomedY(50), zoomed(width), zoomed(height));

}

Answer 1

每次画一个矩形，你可以在里面画一个小一点的。 例如，如果宽度和高度等于 100，那么您将调用：

context.strokeRect(0, 0, 100, 100);

然后您可以使用以前的值绘制较小的矩形：

context.strokeRect(0 + 10, 0 + 10, 100 - 20, 100 - 20);

为此，您必须为您的draw() function 提供参数，这样可以使 position 和新矩形的大小有所不同：

draw()  =>  draw(x, y, width, height)

在您的代码中，声明两个变量x和y并分配默认值（在您的代码中为 50）。

然后你的draw() function：

function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);

  context.beginPath();
  context.strokeRect(zoomedX(50), zoomedY(50), zoomed(width), zoomed(height));

}

像这样改变：

function draw(x, y, width, height) {      
  context.beginPath();
  context.strokeRect(zoomedX(x), zoomedY(y), zoomed(width), zoomed(height));
}

现在它有参数了。 我们还需要去掉清零指令：这个function是专门用来画的，只有这个。 此外，如果您不删除清除线，则每次绘制都会删除先前绘制的矩形。

最后，在回调中调用draw(...)函数：

$width.addEventListener("keyup", function () {
    width = this.value;
    context.clearRect(0, 0, canvas.width, canvas.height);
    draw(x, y, width, height);
    draw(x + 5, y + 5, width - 10, height - 10);
    draw(x + 10, y + 10, width - 20, height - 20);
}, false);

height相同。 因此每次更新width或height值时，它都会绘制 3 个嵌套矩形。

这是一个小提琴： https://jsfiddle.net/nmerinian/jzeygapL/4/

为了测试，我创建了一个drawMultiple(x, y, width, height) function 来绘制三个矩形：

function drawMultiple(x, y, width, height) {
    draw(x, y, width, height);
    draw(x + 5, y + 5, width - 10, height - 10);
    draw(x + 10, y + 10, width - 20, height - 20);
}