范围输入值出现意外结果

Unexpected result with range input values

本文关键字：意外 结果 输入 范围      更新时间：2023-09-26

这个问题（可能）不是由CSS中的宽度/高度引起的，因为它不是。（如何避免HTML画布自动拉伸）当我试图通过愤怒输入来证明我遇到的问题时，我发现当使用范围输入时，它表现得很奇怪。它似乎代表了一个比我所传递的更大的数字。请检查我的代码，告诉我是什么导致了这一切。http://codepen.io/Magnesium/pen/wMwwgx

var engine = function(canvas) { // Trying to make a game engine when the problems started
  this.canvas = canvas.getContext("2d");
  this.defaultColor = "#FF0000";
  this.clearCanvas = function() { // Clears canvas
    this.canvas.clearRect(0, 0, canvas.width, canvas.height);
  };
  this.square = function(x, y, size, color) { // Makes a square. I don't see any problems, but if the error is caused by me it would probably be here
    if (color == undefined) color = this.defaultColor;
    this.canvas.fillStyle = color;
    this.canvas.fillRect(x, y, x + size, y + size);
  };
}
var canvas = document.getElementById("canvas");
var rangeX = document.getElementById("x");
var rangeY = document.getElementById("y");
var size = document.getElementById("sz");
var outX = document.getElementById("ox");
var outY = document.getElementById("oy");
var outSize = document.getElementById("osz");
var out = document.getElementById("out");
var enjin = new engine(canvas); // New engine
var defalt = false;
var src = document.getElementById("src");
setInterval(function() {  // Called ~30 times a second
  enjin.clearCanvas();
  defalt ? enjin.square(50, 50, 50) : enjin.square(rangeX.value, rangeY.value, size.value);
  defalt ? out.innerHTML = "enjin.square(50, 50, 50);" : out.innerHTML = "enjin.square("+rangeX.value+", "+rangeY.value+", "+size.value+");";
  defalt ? src.innerHTML = "Using in-code values" : src.innerHTML = "Using slider values";
  outX.innerHTML = rangeX.value;
  outY.innerHTML = rangeY.value;
  outSize.innerHTML = size.value;
}, 30);

传递给enjin.square的值是字符串。您需要将它们解析为int:

enjin.square(parseInt(rangeX.value), parseInt(rangeY.value), parseInt(size.value));

下面是一个工作示例：

var engine = function(canvas) { // Trying to make a game engine when the problems started
  this.canvas = canvas.getContext("2d");
  this.defaultColor = "#FF0000";
  this.clearCanvas = function() { // Clears canvas
    this.canvas.clearRect(0, 0, canvas.width, canvas.height);
  };
  this.square = function(x, y, size, color) { // Makes a square. I don't see any problems, but if the error is caused by me it would probably be here
    if (color == undefined) color = this.defaultColor;
    this.canvas.fillStyle = color;
    this.canvas.fillRect(x, y, x + size, y + size);
  };
}
var canvas = document.getElementById("canvas");
var rangeX = document.getElementById("x");
var rangeY = document.getElementById("y");
var size = document.getElementById("sz");
var outX = document.getElementById("ox");
var outY = document.getElementById("oy");
var outSize = document.getElementById("osz");
var out = document.getElementById("out");
var enjin = new engine(canvas); // New engine
var defalt = false;
var src = document.getElementById("src");
setInterval(function() { // Called ~30 times a second
  enjin.clearCanvas();
  defalt ? enjin.square(50, 50, 50) : enjin.square(parseInt(rangeX.value), parseInt(rangeY.value), parseInt(size.value));
  defalt ? out.innerHTML = "enjin.square(50, 50, 50);" : out.innerHTML = "enjin.square(" + rangeX.value + ", " + rangeY.value + ", " + size.value + ");";
  defalt ? src.innerHTML = "Using in-code values" : src.innerHTML = "Using slider values";
  outX.innerHTML = rangeX.value;
  outY.innerHTML = rangeY.value;
  outSize.innerHTML = size.value;
}, 30);
#canvas {
  border: 1px solid black;
}
<canvas id='canvas' width='400' height='400'></canvas>
<br />X
<input type='range' id='x' /><span id='ox'></span>
<br />Y
<input type='range' id='y' /><span id='oy'></span>
<br />Size
<input type='range' id='sz' /><span id='osz'></span>
<br /><span id='out'></span>
<br />
<button onclick='defalt = !defalt;'>Default value toggle</button>
<span id='src'></span>

以及更新的笔。

相关文章：