Question

我尝试编写一个滑块程序，当范围设置为最大值时，该程序将覆盖整个方形画布，并带有蓝色方块。我有两个问题：

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

我在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);
}

希望你能帮助新手！

谢谢！

Answer 1

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

通过CSS设置尺寸仅设置canvas元素的外部大小（样式）。您必须在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>

HTML＆＃34;范围＆＃34;输入问题

1 个答案: