我有以下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)
),但没有帮助。
是什么导致我的绘图被拉伸,如何防止这种情况发生?
谢谢,
汤姆