相关疑难解决方法(0)

我有2个画布,一个使用HTML属性width并height调整大小,另一个使用CSS:

<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas>
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>

Compteur1显示它应该,但不是compteur2.内容使用300x300画布上的JavaScript绘制.

为什么会有显示差异？

我有以下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)),但没有帮助.

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

谢谢,
汤姆

我一直在搜索,无法找到如何在HTML5画布上绘制网格/表格.我是HTML5和canvas的新手.

我知道如何绘制形状,但这个绘图网格需要永远理解.

有人可以帮我吗？非常感谢您的时间.