用“<选择></选择>"类型

Resizing a html5 canvas with the "<select></select>" form

本文关键字：gt 选择 lt 类型 quot      更新时间：2023-09-26

我一直在尝试创建一个画布元素，您可以使用"select form"的值来调整该元素的大小。我更愿意只使用Javascript来实现这一点。我觉得我在某个地方遗漏了一个很小的细节。

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = 550;
canvas.height = 300;
drawScreen();
formElement = document.getElementById("height");
formElement.addEventListener('change', heightCanged, true);
formElement = document.getElementById("width");
formElement.addEventListener('change', widthCanged, false);
function widthChanged(e) {
  var target = e.target;
  canvas.width = target.value;
  drawScreen();
}
function heightChanged(e) {
  var target = e.target;
  canvas.height = target.value;
  drawScreen();
}
#canvas {
  border: 1px solid black;
}
//html
<canvas id="canvas"></canvas>
<h3>Height</h3>
<select id="height">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<h3>Width</h3>
<select id="width">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

JS Fiddlehttp://jsfiddle.net/8ma4evLp/1/

如果删除对drawScreen的调用（因为它没有定义），它应该可以正常工作：fiddle

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var heightSelect = document.getElementById("height");
var widthSelect = document.getElementById("width");
canvas.width = 550;
canvas.height = 300;
//drawScreen();
heightSelect.addEventListener('change', function() {
    canvas.height = this.value;
});
widthSelect.addEventListener('change', function() {
    canvas.width = this.value;
});
#canvas{
    border:1px solid black;
}
<canvas id="canvas"></canvas>
<h3>Height</h3>
<select name="height" id="height">
    <option value="100">100</option>
    <option value="200">200</option>
    <option value="300">300</option>
</select>
<h3>Width</h3>
<select name="Width" id="width">
    <option value="100">100</option>
    <option value="200">200</option>
    <option value="300">300</option>
</select>

有几件事不对劲，看起来有些函数名拼写错误，最重要的是，您在select元素上使用了name属性，但在JavaScript中使用了getElementById()来获取它。这是一个更新的工作示例。

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = 550;
canvas.height = 300;
drawScreen();
formElement = document.getElementById("height");
formElement.addEventListener('change', heightChanged, true);
formElement = document.getElementById("width");
formElement.addEventListener('change', widthChanged, false);
function widthChanged(e) {
  var target = e.target;
  canvas.width = target.value;
  drawScreen();
}
function heightChanged(e) {
  var target = e.target;
  canvas.height = target.value;
  drawScreen();
}
function drawScreen() {
}
#canvas{
    border:1px solid black;
}
<canvas id="canvas"></canvas>
<h3>Height</h3>
<select name="Height" id='height'>
    <option value="100">100</option>
    <option value="200">200</option>
    <option value="300">300</option>
</select>
<h3>Width</h3>
<select name="Width" id='width'>
    <option value="100">100</option>
    <option value="200">200</option>
    <option value="300">300</option>
</select>

相关文章：