Question

我正在尝试使用JavaScript创建颜色选择器，到目前为止，如果您在滑块中选择一个值然后刷新页面-在HTML标记中显示颜色，那么它就可以工作（在Firefox中而不是在chrome中）。

但是，我希望它实时刷新颜色，以便画布在您调整滑块时改变颜色。我想我犯了一个非常简单的错误，但我无法弄清楚-我将非常感谢任何帮助/建议！

我已经弄乱了使用.onchange等方法，并且在rbg（）调用中声明了“ outputR.value”，但是这些都不起作用。我想我需要一个更新功能-但我不确定从哪里开始。

var sliderR = document.getElementById("myRangeR");
var sliderG = document.getElementById("myRangeG");
var sliderB = document.getElementById("myRangeB");
var outputR = document.getElementById("demoR"); 
var outputG = document.getElementById("demoG"); 
var outputB = document.getElementById("demoB"); 

sliderR.oninput = function() { 
  outputR.innerHTML = this.value;
}
sliderG.oninput = function() {
  outputG.innerHTML = this.value;
}
sliderB.oninput = function() {
  outputB.innerHTML = this.value;
}

outputR.innerHTML = sliderR.value;
outputG.innerHTML = sliderG.value;
outputB.innerHTML = sliderB.value;

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb("+sliderR.value+","+sliderG.value+","+sliderB.value+")";
ctx.fillRect(0, 0, 80, 80);

<p>
  <div class="slidecontainer">
    <p>Red: <span id="demoR"></span>/255</p>
    <input type="range" min="0" max="255" value="128" class="slider" id="myRangeR">

    <p>Green: <span id="demoG"></span>/255</p>
    <input type="range" min="0" max="255" value="128" class="slider" id="myRangeG">

    <p>Blue: <span id="demoB"></span>/255</p>
    <input type="range" min="0" max="255" value="128" class="slider" id="myRangeB">
  <canvas id="myCanvas"></canvas>
  </div>
</p>
<script src="js/canvastest.js"></script>

预期：移动滑块时HTML画布元素会更改颜色。

实际：仅在刷新页面（在Firefox中）或完全不显示（chrome）时，颜色才会更改。

Answer 1

我看不到要更新画布本身的地方。您希望在值发生更改时更新画布，例如：

ctx.fillStyle = "rgb(" + [outputR, outputG, outputB].join(', ') + ")";

然后使用ctx.fillRect(0, 0, 80, 80);重新提交。

这将为您提供如下信息：

var sliderR = document.getElementById("myRangeR");
var sliderG = document.getElementById("myRangeG");
var sliderB = document.getElementById("myRangeB");
var outputR = document.getElementById("demoR"); 
var outputG = document.getElementById("demoG"); 
var outputB = document.getElementById("demoB"); 

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

sliderR.oninput = function() { 
  outputR.innerHTML = this.value;
  updateRect();
}
sliderG.oninput = function() {
  outputG.innerHTML = this.value;
  updateRect();
}
sliderB.oninput = function() {
  outputB.innerHTML = this.value;
  updateRect();
}

outputR.innerHTML = sliderR.value;
outputG.innerHTML = sliderG.value;
outputB.innerHTML = sliderB.value;

function updateRect() {
  ctx.fillStyle = "rgb(" + [outputR, outputG, outputB].map(i => i.innerHTML).join(', ') + ")";
  ctx.fillRect(0, 0, 80, 80);
}

updateRect();
st.js

Answer 2

首先，您不应该将div或另一个p放在<p>标记内。在结构上是错误的。

现在问您一个问题，它不会重新渲染，因为脚本仅在页面加载时执行。

尝试这样的事情：

var sliderR = document.getElementById("myRangeR");
var sliderG = document.getElementById("myRangeG");
var sliderB = document.getElementById("myRangeB");
var outputR = document.getElementById("demoR"); 
var outputG = document.getElementById("demoG"); 
var outputB = document.getElementById("demoB");
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

myfunc = () => {
  outputR.innerHTML = sliderR.value;
  outputG.innerHTML = sliderG.value;
  outputB.innerHTML = sliderB.value;

  ctx.fillStyle = "rgb("+sliderR.value+","+sliderG.value+","+sliderB.value+")";
  ctx.fillRect(0, 0, 80, 80);
}
myfunc(); // for initialising values on first load

<div>
  <div class="slidecontainer">
    <p>Red: <span id="demoR"></span>/255</p>
    <input type="range" min="0" max="255" value="128" class="slider" id="myRangeR" oninput="myfunc()" >

    <p>Green: <span id="demoG"></span>/255</p>
    <input type="range" min="0" max="255" value="128" class="slider" id="myRangeG" oninput="myfunc()">

    <p>Blue: <span id="demoB"></span>/255</p>
    <input type="range" min="0" max="255" value="128" class="slider" id="myRangeB" oninput="myfunc()">
  <canvas id="myCanvas"></canvas>
  </div>
</div>

希望有帮助！

获取滑块以更新HTML画布

2 个答案: