web-dev-qa-db-ja.com

HTMLCanvasの自動ストレッチを回避する方法

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

図面が伸びる原因は何ですか？どうすればそれを防ぐことができますか？

ありがとう、
トム

htmlcanvasdrawimage
24
Tom

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

36
Eric

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

27
Blixxy

わかりました。JQueryよりも少し単純（そして軽量）です。もちろん、JAVASCRIPITSELFです。

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

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

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

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

よく働く。

7
Angelo

アニメーションループ内でタイムアウトを待機するwhileループを配置する方が簡単であることがわかりました。次に例を示します。

function animate() {
    c.clearRect(0, 0, window.innerWidth, window.innerHeight);
    ryuji.draw();
    ryuji.update();
    let now = Date.now();
    then = now + (1000 / fps);
    while (Date.now() < then) {

    }
    requestAnimationFrame(animate);
}
0
prithwin