使用Button更改矩形高度

Question

我有一个矩形和一个按钮。当用户单击按钮时，我希望矩形变大。这是我的代码：

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

var height = 150;

function myFunction(){
	height = 300;
}

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

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

虽然单击按钮时没有任何反应。帮助

Answer 1

height="height"在html中不是有效值。

点击按钮，您可以更改画布的style.height

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

修改

从html中删除width，通过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(){
	c.style.height ='300px';
}

#myCanvas{
width:300px
}

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

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