使用滑块值调整 canvas 元素中的矩形

Question

我希望能够使用滑块调整 canvas 上矩形的大小，同时让这些值显示在两个文本框中。我有这段代码，但它使旧值在 canvas 上可见。在我调用 strokeRect() 之前，我曾尝试使用 clearRect()，但这使我的滑块无法工作。

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

这是我的 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>

使用滑块值调整 canvas 元素中的矩形

Resizing a rectangle in a canvas element using slider values

javascript

html

canvas

slider

drawrect