Set Leinwand Höhe und Breite auf die Höhe und Breite des umschließenden div

Ich habe den folgenden Code und möchte die Leinwand, um die gleiche Größe wie meine div mit der Klasse machen canvas-wrap:Set Leinwand Höhe und Breite auf die Höhe und Breite des umschließenden div

#overlay { 
 
    position: absolute; 
 
    top: 20px; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.canvas-wrap { 
 
    position: absolute; 
 
    top: 20px; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="canvas-wrap"> 
 
    <div class="row" id="overlay"> 
 
    </div> 
 
    <canvas id="myCanvas"></canvas> 
 
</div>

Leider scheint es im Moment 150x300 Standard zu sein. Wäre besser, wenn es die gleiche Größe wie die div mit der Klasse canvas-wrap hätte.

Kann jemand erklären, was ich falsch mache und den Fehler beheben?

Quelle

2016-09-06 SwimmingG

Breite und Höhe über CSS Angeben nur _scale_ der Leinwand, aber seine intrinsischen Pixelabmessungen nicht „Koordinatenraum verändern ("). Sie müssen die 'width' und' height' _attributes_ für die Zeichenfläche angeben (wenn Sie einen anderen Koordinatenraum als die Standardgröße 150x300px wünschen). – CBroe

Ihr Code sieht so aus, als ob die Überlagerung die gleiche Größe wie Ihre Zeichenfläche hat (obwohl nach unten verschoben) 20px). Sie haben derzeit keine Stile für Ihre tatsächliche Leinwand – Pete

Sie haben keine Stildefinitionen auf der Zeichenfläche selbst festgelegt.

#overlay { 
 
    position: absolute; 
 
    top: 20px; 
 
    width: 100%; 
 
    bottom: 0; 
 
} 
 

 
.canvas-wrap { 
 
    position: absolute; 
 
    top: 20px; 
 
    width: 100%; 
 
    bottom: 0px; 
 
    box-sizing: border-box; 
 
} 
 

 
.canvas-wrap canvas { 
 
    border: 1px solid magenta; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
    
 
} 
 

 
body, .canvas-wrap { 
 
    padding: 0; 
 
    margin: 0; 
 
}

<div class="canvas-wrap"> 
 
    <div clas="row" id="overlay"> 
 
    </div> 
 
    <canvas id="myCanvas"></canvas> 
 
</div>

Quelle

2016-09-06 11:01:47 HerrSerker

Hallo, vielen Dank für Ihre Hilfe. Leider erlaubt mir die Zeichenfläche nichts zu zeichnen, wenn ich nicht ausdrücklich die Höhe und Breite auf dem Canvas-Tag festlege und damit den ganzen Zweck vereitle. Irgendwelche Hilfe dabei? – SwimmingG

Für meine suggetion Sie haben die Höhe und Breite des div in CSS zu erwähnen, und auch gleiche Breite und Höhe auf die Leinwand erwähnen. Zum Beispiel

.canvas-wrap { 
 
    width: 100%; 
 
    border: 3px solid #000; 
 
    height: 200px 
 
} 
 

 
.canvas-wrap canvas { 
 
    border: 1px solid red; 
 
    width: 100%; 
 
    height: 200px; 
 
}

<div class="canvas-wrap"> 
 
    <canvas id="myCanvas"></canvas> 
 
</div>

Für meine suggetion Sie haben die Höhe und Breite des div in CSS zu erwähnen, und auch gleiche Breite und Höhe auf die Leinwand erwähnen. Zum Beispiel

.canvas-wrap {Breite: 100%; Höhe: 100 Pixel;}

Quelle

2016-09-06 12:44:03 Dhaarani

Set Leinwand Höhe und Breite auf die Höhe und Breite des umschließenden div

Antwort

Verwandte Themen