javascript - 使用按钮更改矩形高度

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 中的有效值。

点击按钮你可以改变 Canvas 的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>