Question

如果HTML5画布中的内容超出其边距，我如何将其设置为自动重新调整大小？我正在开发一个家庭树应用程序，当一代人比画布的定义限制更宽时，连接节点的行消失了。

Answer 1

同样，这真的取决于你是如何绘制内容的，但这里是一个如何在将图像绘制到画布时这样做的例子。

    var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');
    base_image = new Image();
    base_image.src = 'someImaeg.png';
    base_image.onload = function(){
        document.getElementById('canvas').width = base_image.width;
        document.getElementById('canvas').height = base_image.height;
        context.drawImage(base_image, 0, 0);
    }

Fiddle

Answer 2

使用画布没有自动功能。它是一个可以用来绘制图形的被动位图，因此所有形式的逻辑都需要实现＆＃34;手动＆＃34;。

因此，为了使其增长，您必须跟踪正在绘制的所有内容的位置和大小，以便您可以计算当前图形的总边界框。

如果该边界框的位置+大小超过画布大小，请用该更新画布大小（画布大小=边界框＆＃39;位置+大小）。

但是，在调整画布大小时，所有当前内容和状态都会丢失，因此您必须重新渲染和重新初始化内容，以及第一次绘制内容时。这是您需要计划并融入设计的内容。

HTML Canvas - 随着内容的增长自动重新调整大小

2 个答案: