我有以下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);
}
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))，这没有帮助。
什么是导致我的绘图拉伸，我该如何防止？
谢谢，
汤姆
解决方法
您需要canvas元素中的width和height属性。它们指定画布的坐标空间。显然，它默认为2：1宽高比的画布，您的CSS倾斜成一个正方形。
