如何避免HTML Canvas自动拉伸

Question

我有以下HTML:

<style type="text/css">
    #c{width:200px;height:500px}
</style>
<canvas id="c"></canvas>
<script type="text/javascript">
    var i = new Image();
    i.onload = function () {
        var ctx = document.getElementById('c').getContext('2d');
        ctx.drawImage(i, 0, 0);
    }
    i.width = i.height = 20; // actual size of square.png
    i.src = 'square.png';
</script>

问题是绘制的图像会自动拉伸(调整大小)与画布大小成比例.我已经尝试使用所有可用的参数(drawImage(i, 0, 0, 20, 20, 0, 0, 20, 20)),但没有帮助.

是什么导致我的绘图拉伸,我该如何防止这种情况？

谢谢,
汤姆

Answer 1

您需要canvas元素中的width和height属性.它们指定画布的坐标空间.显然,它默认为宽高比为2:1的画布,您的CSS会偏向正方形.

Answer 2

值得一提的是画布的宽度和高度属性是不喜欢老派的<img> width和height属性.它们不能代替CSS.它们指定画布本身的像素缓冲区应该有多少像素,如果不使用css对其应用大小,css将暗示它的大小来自该像素缓冲区的形状.在css中设置元素的大小不会设置像素缓冲区的大小 - 它会调整大小.从CSS的角度来看,<canvas>与<img>完全相同.

Answer 3

好吧,比JQuery更简单(和更轻)..当然是JAVASCRIP ITSELF!

如果您需要动态更改画布尺寸,请使用:

document.getElementById('yourcanvasid').setAttribute('width', aWidth);
document.getElementById('yourcanvasid').setAttribute('height', aHeight);

Answer 4

如果你正在使用JQuery,你不应该设置CSS(作为上面提到的评论者).您需要设置属性:

$("canvas").attr('width', aWidth);
$("canvas").attr('height', aHeight);

效果很好.