javascript - 调整包含 Canvas 的 div 的大小

Question

我有一个包含 Canvas 的 div:

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

“canvas-wrapper”类的 CSS:

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

只要 div 的宽度发生变化， Canvas 宽度就会更新(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 将不会调整大小。

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

有什么想法吗？

Answer 1

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

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

您可以内联解决该问题:

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

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