Question

我有这段代码，画布高度和宽度在第一次从nCol和nLin值获取值，但是当nCol和nLin值的值发生变化时不会更新。你应该在哪里找到变化的代码是动态的？ if if（canvas.getContext）{}或函数MakeCnv？

<html>
<body>
<canvas id="canvas">
    <span style="color: red">
    <b>canvas</b> not supported</span>
</canvas>
<br />
Col: <input type="text" value="3" id="nCol" />
Lin: <input type="text" value="3" id="nLin" />
Text: <input type="text" value="Text" id="texto" />
<input type="button" value="Make Canvas"
onclick="MakeCnv()" />

<script>
var canvas = document.getElementById("canvas");
var line = document.getElementById("nLin").value;
var cols = document.getElementById("nCol").value;
var cnv = null;

// resize the canvas
canvas.width = line * 32;
canvas.height = cols * 32;
canvas.style="border: blue solid 1px";

if (canvas.getContext) {
    cnv = canvas.getContext("2d");
    MakeCnv();
}
function MakeCnv(){
        cnv.strokeStyle = "olive";
        // put the text in the canvas
}
</script>
</body>
</html>

Answer 1

使用onchange属性。将其添加到您的输入中：

<input onchange="run()">

或者在你的JS中使用它：

document.getElementById("nLin").onchange = run();

两者都需要定义函数run - 所有这些都必须包含变量设置：

var line,
    cols;

function run() {
    line = document.getElementById("nLin").value;
    cols = document.getElementById("nCol").value;
}

Answer 2

更改<script>块以添加处理画布大小的新函数：

<script>
function resizeCanvas(){
    var canvas = document.getElementById("canvas");
    var line = document.getElementById("nLin").value;
    var cols = document.getElementById("nCol").value;

    // resize the canvas
    canvas.width = line * 32;
    canvas.height = cols * 32;
}

var canvas = document.getElementById("canvas");
canvas.style="border: blue solid 1px";
resizeCanvas();

var cnv = null;
if (canvas.getContext) {
    cnv = canvas.getContext("2d");
    MakeCnv();
}

function MakeCnv(){
    cnv.strokeStyle = "olive";
    // put the text in the canvas
}
</script>

更改<input>文本框以附加onchange事件监听器。

Col: <input type="text" value="3" id="nCol" onchange="resizeCanvas()"/>
Lin: <input type="text" value="3" id="nLin" onchange="resizeCanvas()"/>

Answer 3

而不是
canvas.style="border: blue solid 1px";
你可能想要
canvas.style.border = "blue solid 1px";

您的代码可以更改为：

<!DOCTYPE html>
<html><head>
<script type='text/javascript'>//<![CDATA[ 
function dimensionCanvas(){
    var canvas = document.getElementById("canvas");
    var line   = document.getElementById("nLin").value;
    var cols   = document.getElementById("nCol").value;
    window.cnv = null;  
    // resize the canvas also clears the canvas as per spec!!!
    canvas.width = line * 32; 
    canvas.height = cols * 32; 
    canvas.style.border = "blue solid 1px"; 
    if (canvas.getContext) { 
      window.cnv = canvas.getContext("2d");
      MakeCnv();
    }
}

function MakeCnv(){
        cnv.strokeStyle = "olive";
        // put the text in the canvas
}

window.onload=function(){
    dimensionCanvas();
};
//]]>  
</script>
</head><body>
<canvas id="canvas">
    <span style="color: red">
    <b>canvas</b> not supported</span>
</canvas>
<br />
Col: <input type="text" value="3" id="nCol" onchange="dimensionCanvas()" />
Lin: <input type="text" value="3" id="nLin" onchange="dimensionCanvas()" />
Text: <input type="text" value="Text" id="texto" />
<input type="button" value="Make Canvas" onclick="MakeCnv()" />
</body></html>

工作fiddle here。

从表单值开始的Canvas Width和Height

3 个答案: