HTML“范围”输入问题

debugcn 发表于 Dev

用户7467548

我正在尝试编写一个滑块程序，当范围设置为最大时，它将用蓝色方块覆盖整个方形画布。但是我遇到了两个问题：

移动我的滑块时，它会生成一个矩形而不是正方形。
我的滑块正方形的最大值只覆盖了画布的不到一半。

我正在 Codepen 上做我的项目，我的滑块代码如下。如果您需要完整的详细信息，请访问我的笔的链接：https : //codepen.io/drummerlover33/pen/EXdobV。

function doSquare() {
  var slider = document.getElementById("colorSlider");
  var sliderValue = slider.value;
  var canvas = document.getElementById("mainCanvas");
  var canvasContext = canvas.getContext("2d");
  canvasContext.clearRect(0,0,canvas.width,canvas.height);
  canvasContext.fillStyle = "blue";
  canvasContext.fillRect(0,0,sliderValue,sliderValue);
}

希望对新手有所帮助！

谢谢！

或德罗里

画布width和height属性不仅是画布的大小，还可以设置其分辨率。如果您不通过属性（或通过脚本）设置width和设置height，画布的默认分辨率为300px X 150px。

通过 CSS 设置尺寸只会设置画布元素（样式）的外部尺寸。您必须在 canvas 元素上显式设置width和height属性。

// Remnant function from previous case
function doRed() {
  var canvasElements = document.getElementById("mainCanvas");
  canvasElements.style.backgroundColor = "red";
}
// END of remnant function

var slider = document.getElementById("colorSlider");
var canvas = document.getElementById("mainCanvas");
var canvasContext = canvas.getContext("2d");

function doSquare() {
  var sliderValue = slider.value;
  canvasContext.clearRect(0, 0, canvas.width, canvas.height);
  canvasContext.fillStyle = "blue";
  canvasContext.fillRect(
    0,
    0,
    sliderValue,
    sliderValue
  );
}

function doColor() {
  var canvasElements = document.getElementById("mainCanvas");
  var pickedColor = document.getElementById("colorInput").value;
  canvasElements.style.backgroundColor = pickedColor;
}

<h1>Inputs and Events</h1>
<canvas id="mainCanvas" height="100px" width="100px"></canvas>

<p>
  <input type="range" min="0" max="100" value="0" id="colorSlider" oninput="doSquare()">

  <input type="color" value="#ffffff" id="colorInput" onchange="doColor()">
</p>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。