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

Question

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

到目前为止，我得到了以下代码。 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() 函数提供参数，这样才能使新矩形的位置和大小发生变化：

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

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

然后你的 draw() 函数：

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));
}

现在它有参数了。我们还要去掉清除指令：这个函数是专门用来画画的，只有这个。而且，如果不去掉清除线，每次画都会把之前画的矩形去掉。

最后，在回调中调用 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 个嵌套的矩形。

这里是 Fiddle：https://jsfiddle.net/nmerinian/jzeygapL/4/

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

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);
}

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

How to draw a rect within another one

html

javascript

canvas

rect