div-Dehnung mit Leinwand

Question

Hallo, ich versuche das zu haben:

<div>
<canvas height="300px" width="200px"></canvas>
</div>

Ich habe Javascript erstellt, um Leinwand zu rendern, könnte jemand raten, wie man div nach Leinwandgröße streckt und ob es ohne Javascript möglich ist??Ich habe bereits Lösungen für verschachtelte Divs ausprobiert, aber es hat nicht funktioniert.Danke

Answer 1

Verwenden Sie eine andere display für das Enthalten div dann sollten die Dinge funktionieren (siehe auch diese jsfiddle):

<div>
    <canvas height="300px" width="200px"></canvas>
</div>

CSS:

div {
    border: 2px solid blue; /* demo purposes */
    display: inline-block;
    line-height: 0;
}
canvas {
    background-color: khaki; /* demo purposes */
}

PS.Der line-height: 0 gibt es, um sicherzustellen, dass es keine erscheint raum wird gerendert unter der Leinwand.Siehe auch diese Frage.

Answer 2

Wenn Sie feststellen können, wann Ihre Segeltuchgröße geändert wird, feuern Sie ein Ereignis ab, das die Abmessungen des DIZ dynamisch als entsprechend den geänderten Abmessungen der Leinwand einstellt.