有没有一种很好的方法可以添加新框并使用javascript重新绘制画布？

底层代码在画布中创建随机块。 这就是我到目前为止所取得的成就。但我在做进一步的任务时遇到了困难。我想在画布外做一个按钮（当然这很容易），点击这个按钮，在画布中添加一个新的框。旧箱子的位置可能会改变，也可能不会改变（直到提供适当的空间为止）。如果没有足够的空间容纳新的盒子，则增加内部容器的大小，这将增加画布的大小，并用新的画布比例重新绘制旧盒子。如果内容器的大小增加了外容器的大小，则会在外容器中出现一个滚动条。 这是我当前的代码：

Html:

<div class="outer-container">
    <div class="inner-container">
        <canvas id="canvas" style="height:100%;width:100%"></canvas>
    </div>
</div>

Javascript:

function getRandomColor() {
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += (Math.random() * 16 | 0).toString(16);
    }
    return color;
}

function Point(x, y) {
    this.x = x;
    this.y = y;
}

function Rectangle(p1, p2) {
    this.p1 = p1;
    this.p2 = p2;
}

Rectangle.prototype.isInside = function (r) {
    function check(a, b) {
        return (
            a.p1.x <= b.p1.x && b.p1.x <= a.p2.x && a.p1.y <= b.p1.y && b.p1.y <= a.p2.y ||
            a.p1.x <= b.p2.x && b.p2.x <= a.p2.x && a.p1.y <= b.p2.y && b.p2.y <= a.p2.y ||
            a.p1.x <= b.p2.x && b.p2.x <= a.p2.x && a.p1.y <= b.p1.y && b.p1.y <= a.p2.y ||
            a.p1.x <= b.p1.x && b.p1.x <= a.p2.x && a.p1.y <= b.p2.y && b.p2.y <= a.p2.y
        );
    }
    return check(this, r) || check(r, this);
}

function generateRectangles() {
    function p() { return Math.random() * 300 | 0; }
    function s() { return 50 + Math.random() * 150 | 0; }

    var rectangles = [],
        r, size, x, y, isInside, i, counter = 0;

    for (i = 0; i < 20; i++) {
        counter = 0;
        do {
            counter++;
            x = p();
            y = p();
            size = s();
            r = new Rectangle(new Point(x, y), new Point(x + size, y + size));
            isInside = rectangles.some(function (a) {
                return a.isInside(r);
            });
        } while (isInside && counter < 1000);
        counter < 1000 && rectangles.push(r);
    }
    return rectangles;
}

function drawRectangles(rectangles) {
    var canvas = document.getElementById("canvas"),
        ctx = canvas.getContext("2d");

    rectangles.forEach(function (a) {
        ctx.lineWidth = 1;
        ctx.strokeRect(a.p1.x + 0.5, a.p1.y + 0.5, a.p2.x - a.p1.x - 1, a.p2.y - a.p1.y - 1);
        ctx.fillStyle = getRandomColor();
        ctx.fillRect(a.p1.x + 0.5, a.p1.y + 0.5, a.p2.x - a.p1.x - 1, a.p2.y - a.p1.y - 1);
    });
}

var rectangles = generateRectangles();
drawRectangles(rectangles);

函数getRandomColor（）{ var color='#'； 对于（变量i=0；i<6；i++）{ 颜色+=（Math.random（）*16 | 0）.toString（16）； } 返回颜色； } 功能点（x，y）{ 这个.x=x； 这个。y=y； } 函数矩形（p1，p2）{ 这是1.p1=p1； 这是p2=p2； } Rectangle.prototype.isInside=函数（r）{ 功能检查（a、b）{ 返回(

---

a、 p1.xCreate按钮，带有onclick=“draw（）；”属性和javascriptdraw（）函数可以绘制任何您想要的内容。

当前代码中使用的是什么或不使用的是什么？另外，请理解，您必须始终跟踪并执行逻辑来调整方框大小。画布只是将内容光栅化到屏幕上的一种方式。它不会为您调整内容大小；在这方面，它实际上是单向的。是的，您可以获得像素您的意思是：“旧框的位置可能会改变，也可能不会改变（取决于是否提供合适的空间）”？。您的

draw矩形

函数已经在

rectangles[]

中绘制了每个矩形。因此您可以（1）点击测试可能的新矩形，（2）

矩形。将
您的
新矩形…
推入
矩形中，（3）清除画布，（4）必要时调整容器和画布的大小（必要时在容器上使用溢出滚动条），&（5）调用
DrawRectanges
。顺便说一句，不要用CSS调整画布元素的大小——这会挤压和/或拉伸你的矩形。相反，调整画布元素本身的大小。当询问有关画布的问题并如上所述描述其行为时，我建议始终添加一个屏幕截图或类似的内容，这会使其他人更容易快速地进行操作明白了。我还建议你在codepen.io或类似文件中放一个工作样本。