我有一个 canvas 并正在使用百日咳 th:style 标签将背景图像设置到画布上，就像这样 .

<div class="row-fluid">
    <div class="span6">
        <canvas id="myCanvas" th:style="'background: url('+@{backgroundImageUrl}+') no-repeat center center;'" ></canvas>
    </div>
    <div class="span6"></div>
</div>

上面的代码渲染画布的默认大小，裁剪背景图像 . 由于 backgroundImageUrl 动态加载各种大小的图像，我无法设置画布的高度和宽度 .

如何设置画布的宽度和高度

  • 当背景图像尺寸非常大时，画布应该适合 span6 div，而不会裁剪背景图像

  • 当背景图像尺寸非常小时，画布应该适合 span6 div并且背景图像应该对齐中心

javascript css twitter-bootstrap canvas html5-canvas