使用滑块值调整画布元素中的矩形大小

Question

我希望能够使用滑块调整画布上的矩形大小，同时将这些值显示在两个文本框中。我有这段代码工作，但它使旧值在画布上可见。在我打电话给strokeRect() 之前，我尝试过使用clearRect()，但这阻止了我的滑块工作。

简而言之，我想在画布上绘制一个矩形，并让两个滑块调整它的大小，一个用于宽度，一个用于高度。我对编码比较陌生，所以我知道我可能犯了一个明显的错误！

这是我的 JS 代码，用于将值打印到文本框并绘制矩形：

$(function() {
   var c1=document.getElementById("c1");
   var ctx1=c2.getContext("2d");
   $( "#slider1" ).slider({
  value:100,
  min: 10,
  max: 500,
  step: 10,
  slide: function( event, ui ) {
    $( "#textBox1" ).val(ui.value + "cm");
    ctx1.strokeRect(0, 0,$( "#slider1" ).slider( "value" ), $( "#slider2").slider( "value" ) );
  }
  });
  $( "#slider2" ).slider({
  value:100,
  min: 10,
  max: 500,
  step: 10,
  slide: function( event, ui ) {
    $( "#textBox2" ).val(ui.value + "cm");
    ctx1.strokeRect(0, 0,$( "#slider1" ).slider( "value" ), $( "#slider2").slider("value"));
  }
  });
$( "#textBox1" ).val($( "#slider1" ).slider( "value" ) + "cm");
$( "#textBox2" ).val($( "#slider2" ).slider( "value" ) + "cm");
 });

还有我的 HTML 代码：

 <div id="slider1" class="slider"></div>
 <input type="text" id="textBox1" class="sizeBox" value="100cm">
 <label>Height</label></input>
 <br>
 <div id="slider2" class="slider"></div>
 <input type="text" id="textBox2" class="sizeBox" value="100cm">
 <label>Width</label></input>
 <canvas id="c1"></canvas>

Answer 1

您的代码中存在一些问题：

• 您错过了"100cm" 的结束语。
• var c2=document.getElementById("frameCanvas") 没有 frameCanvas 元素

可能还有更多的故障——我在找到这些故障后就停止了查找。

或者，您可以在原生 input-type=range 元素上监听 change 事件：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

ctx.fillStyle='skyblue';
ctx.strokeStyle='gray';
ctx.lineWidth=3;

var width=75;
var height=60;

// listen to slider events
$rwidth=$('#rwidth');
$rwidth.attr({min:20,max:150}).val(width);
$rwidth.on('input change',function(){
    width=parseInt($(this).val());
    draw();
});
//
$rheight=$('#rheight');
$rheight.attr({min:20,max:150}).val(height);
$rheight.on('input change',function(){
    height=parseInt($(this).val());
    draw();
});

draw();

function draw(){
    ctx.clearRect(0,0,cw,ch);
    ctx.fillRect(20,20,width,height);
    ctx.strokeRect(20,20,width,height);
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Width:&nbsp<input id=rwidth type=range><br>
Height:&nbsp<input id=rheight type=range><br>
<br>
<canvas id="canvas" width=300 height=300></canvas>