javascript - AngularJS 列 col-md 大小

Question

我有 3 列:

<div class="col-md-2">
<!-- Stuff 1 -->
</div>

<div class="col-md-6">
   <canvas id="canvasBlocs" width="950" height="1700"></canvas>   
</div>

<div class="col-md-4">
<!-- Stuff 3 -->
</div>

在我的 Canvas 中，我有一个图像，但它不适合该列(如果我缩放/取消缩放，则在右侧和左侧会变大)。

如何确保 Canvas 不会大于列？

我只希望 Canvas 与列完美契合。

[编辑] 我的 JS 代码。图像现在在 Canvas 内“太大”了。如何在 Canvas 中缩放合适的图像大小？

    var canvas = document.getElementById('canvasBlocs');
    var context = canvas.getContext('2d');
    var img = new Image();
    img.src = ".img/myImage.png;
    img.onload = function () {
       var pattern = context.createPattern(img, "no-repeat");
       context.fillStyle = pattern;
       context.fillRect(0, 0, canvas.width, canvas.height);
    }

[编辑2]

Canvas OK 但图片里面太大了: http://hpics.li/3cf3e2c

当我缩小时: http://hpics.li/0a0230e

感谢您的帮助!

Answer 1

只需告诉 canvas 元素不要展开得比父容器的宽度还宽，它就会按比例缩放:

#canvasBlocs {
    max-width: 100%;
}

要在您的情况下渲染图像，最好使用 drawImage 方法:

img.onload = function() {
   context.drawImage(img, 0, 0, img.width, img.height);
}