Ändern der Rechteckhöhe mit Knopf

Question

Ich habe ein Rechteck und eine Taste. Wenn der Benutzer auf die Schaltfläche klickt, möchte ich, dass das Rechteck größer wird. Dies ist mein Code:

var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.rect(20, 20, 150, 100); 
 
ctx.stroke(); 
 

 
var height = 150; 
 

 
function myFunction(){ 
 
\t height = 300; 
 
}

<button onclick="myFunction()">Click Me!</button> 
 

 
<canvas id="myCanvas" width="300" height="height" style="border:1px solid #d3d3d3;"></canvas>

Obwohl, es passiert nichts, wenn ich auf die Schaltfläche klicken. Hilfe?

Answer 1

height="height" ist kein gültiger Wert in HTML.

Auf Schaltfläche anklickt Sie die style.height der Leinwand

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.rect(20, 20, 150, 100); 
ctx.stroke(); 

var height = 150; 

function myFunction(){ 
    c.style.height = '300px'; // changed here 
} 

DEMO

bearbeiten

Entfernen Sie die width vom html ändern können, fügen Sie es durch css

JS

function myFunction(){ 
     c.style.height ='300px'; 
    } 

CSS

#myCanvas{ 
    width:300px 
    } 

HTML

<canvas id="myCanvas" style="border:1px solid #d3d3d3;"></canvas> 

DEMO 2

var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.rect(20, 20, 150, 100); 
 
ctx.stroke(); 
 

 

 

 
function myFunction(){ 
 
\t c.style.height ='300px'; 
 
}

#myCanvas{ 
 
width:300px 
 
}

<button onclick="myFunction()">Click Me!</button> 
 

 
<canvas id="myCanvas" style="border:1px solid #d3d3d3;"></canvas>