窗体值的画布宽度和高度

我有此代码，画布高度和宽度在第一次从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>

来源

2013-04-18 Alf

使用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-18 19:45:46

更改您的<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-18 19:57:19

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

来源

2013-04-18 20:02:21 GitaarLAB

窗体值的画布宽度和高度

回答

相关问题