So vermeiden Sie die automatische Ausdehnung von HTML-Canvas

Habe ich das folgende Stück 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>

Das Problem ist, dass das gezeichnete Bild automatisch gestreckt (Größe) proportional mit der Größe der Leinwand. Ich habe versucht, mit allen verfügbaren Parametern (drawImage(i, 0, 0, 20, 20, 0, 0, 20, 20)) und das hat nicht geholfen.

Was die Ursache für meine Zeichnung zu Strecken und wie kann ich das verhindern?

Dank,

Tom

InformationsquelleAutor der Frage Tom | 2010-05-23

  1. 34

    Müssen Sie die width und height Attributen im canvas-element. Geben Sie den Koordinatenraum für die Leinwand. Offenbar ist es standardmäßig auf eine Leinwand ein Seitenverhältnis von 2:1, was CSS ist geneigt zu einem Quadrat.

    InformationsquelleAutor der Antwort Eric

  2. 26

    Es ist erwähnenswert, dass die Attribute Width und Height des canvas sind nicht wie die old school <img> Attribute width und height. Sie sind kein Ersatz für CSS. Sie geben an, wie viele Pixel das pixel-buffer in die Leinwand selbst sollte, und wenn Sie nicht gelten eine Größe, um es mit css, css bedeutet, dass Sie die Größe aus, die Form, die pixel-buffer. Einstellung des Elements Größe in der css nicht die Größe der pixel buffer - es ändert die Größe. Aus einer CSS-Perspektive, ein <canvas> ist ganz das gleiche wie ein <img>.

    InformationsquelleAutor der Antwort Blixxy

  3. 8

    Ok, ein bisschen einfacher (und leichter) als JQuery ist .. JAVASCRIP SELBST natürlich !

    Wenn Sie Sie brauchen, um dynamicaly Ihre Leinwand Maße, nutzen Sie einfach:

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

    InformationsquelleAutor der Antwort jst

  4. 7

    Wenn Sie mit JQuery sind, sollten Sie nicht setzen das CSS (wie die Kommentatoren oben bereits erwähnt). Sie müssen, um das Attribut zu setzen, so:

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

    funktioniert Super.

    InformationsquelleAutor der Antwort Angelo

  5. 0

    Fand ich es einfacher, einfach eine while-Schleife wartet auf timeout in meiner animation Schleife, Zum Beispiel:

    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);
}

    InformationsquelleAutor der Antwort prithwin

Schreibe einen Kommentar