1

我有这个代码，画布的高度和宽度第一次从 nCol 和 nLin 值中获取值，但是当 nCol 和 nLin 值的值发生变化时不会更新。您应该在哪里找到更改的代码是动态的？在 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>
4

3 回答 3

0

更改您的<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()"/>
于 2013-04-18T19:57:19.503 回答
0

而不是
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>

在这里工作小提琴。

于 2013-04-18T20:02:21.773 回答
0

使用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;
}
于 2013-04-18T19:45:46.723 回答