Question

我的画布没有高度，我想保持这样。静态的。每当我添加一个矩形时，我想用100像素增加画布的高度。

https://jsfiddle.net/5qybcp84

每当我添加一个矩形时，它就像你在小提琴中看到的那样没有显示。

我尝试过使用$("#NodeList").width('200').height($("#NodeList").height()+100);

但它只会增加整个画布，包括矩形。

Answer 1

据我所知，画布宽度/高度并不意味着在已经绘制的东西上有所改变（除非有充分理由）。

在您的示例中，您事先已经知道将在画布上绘制多少个矩形。只需将画布设置为高度，然后再绘制它。

如果您绝对想要保持画布的高度动态，那么每次更改画布高度时都需要清除画布并重新绘制所有以前的矩形，如下所示：

var canvas = $('#NodeList').get(0);
var ctx = canvas.getContext('2d');
canvas.height = 200;

var rects = [
    [20, 20, 150, 100],
    [20, 140, 150, 100],
    [20, 260, 150, 100]
];
for (var i = 0; i < rects.length; i++) {
    canvas.height = canvas.height + 100;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    //here we redraw previous rectangles
    for (var j = 0; j < i; j++) {
        ctx.fillRect(rects[j][0],
        rects[j][1],
        rects[j][2],
        rects[j][3]);
    }
    ctx.fillRect(rects[i][0],
    rects[i][1],
    rects[i][2],
    rects[i][3]);

}

$('#NodeList').click(function (e) {
    var x = e.offsetX,
        y = e.offsetY;

    for (var i = 0; i < rects.length; i++) {
        if (x > rects[i][0] && x < rects[i][0] + rects[i][2] && y > rects[i][1] && y < rects[i][1] + rects[i][3]) {
            alert('Rectangle ' + i + ' clicked');
        }
    }
});

Demo

添加矩形时添加100像素的高度

1 个答案: