调整包含画布的 div

Question

我有一个包含画布的 div：

<div class="canvas-wrapper">
    <canvas height="30px"></canvas>
</div>

“画布包装器”类的 CSS：

.canvas-wrapper{
    width: 100%;
    overflow: hidden;
}

每当 div 的宽度发生变化时，画布宽度就会更新（Angular 指令）：

link: function(scope, element, attr){
    var canvas = element.find('canvas')[0];
    var div = element.find('div')[0];

    scope.$watch(function(){
        return div.offsetWidth;
    }, function(newVal, oldVal){
        canvas.width = newVal;
    });
}

我已经通过调整浏览器宽度对此进行了测试。当我增加窗口时它工作正常，但是当我减少窗口时，div 不会调整大小。

我想那是因为它包含画布，但我该如何解决这个问题？画布应该遵循 div 宽度，而不是块调整大小。

有任何想法吗？

Answer 1

您可以向画布元素添加 100% 的 CSS 宽度。

虽然通过 CSS 调整画布大小通常不是一个好习惯，因为它会拉伸/缩小“画布内的图像”，但如果它与画布宽度和高度属性同步，则没有任何问题。

你可以解决这个内联：

<div class="canvas-wrapper">
    <canvas height="30px" style="width: 100%;"></canvas>
</div>

或者使用您喜欢的任何 CSS 选择方法。