javascript - 输入值范围出现意外结果

Question

这个问题(可能)不是由 CSS 中的宽度/高度引起的，因为事实并非如此。 (How to avoid HTML Canvas auto-stretching)当尝试使用愤怒输入来演示我遇到的问题时，我发现使用范围输入时它表现得很奇怪。它似乎代表了比我传递的数字更大的数字。请检查我的代码并告诉我是什么导致了这一切。 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);

Answer 1

您传递给 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>

还有一个updated pen .