25

次の 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)) を使用してみましたが、役に立ちませんでした。

描画が伸びてしまう原因と、それを防ぐ方法を教えてください。

ありがとう、
トム

4

5 に答える 5

37

canvas 要素にはwidthおよび属性が必要です。heightキャンバスの座標空間を指定します。どうやら、デフォルトで 2:1 のアスペクト比のキャンバスに設定されており、CSS が正方形に歪んでいます。

于 2010-05-23T14:14:49.017 に答える
27

canvas の Width 属性と Height 属性は、古い学校の <img> の width 属性と height 属性とは異なることに注意してください。CSS の代わりにはなりません。キャンバス自体のピクセル バッファーに必要なピクセル数を指定します。css でサイズを適用しない場合、css はそのピクセル バッファーの形状からサイズを暗示します。css で要素のサイズを設定しても、ピクセル バッファーのサイズは設定されません。サイズが変更されます。CSS の観点からは、<canvas> は <img> とまったく同じものです。

于 2010-10-27T23:57:53.990 に答える
11

わかりました、JQuery よりも少し単純 (かつ軽量) なのは .. もちろん JAVASCRIP ITSELF です!

キャンバスのサイズを動的に変更する必要がある場合は、次を使用してください。

document.getElementById('yourcanvasid').setAttribute('width', aWidth);
document.getElementById('yourcanvasid').setAttribute('height', aHeight);
于 2013-02-05T14:45:24.450 に答える
8

JQuery を使用している場合は、CSS を設定しないでください (上記のコメント投稿者のように)。属性を次のように設定する必要があります。

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

よく働く。

于 2012-08-05T10:10:09.310 に答える