Ändern der Größe eines Rechtecks ​​in einem Canvas-Element mithilfe von Schiebereglern

Question

Ich möchte die Größe eines Rechtecks ​​auf einer Leinwand mithilfe eines Schiebereglers ändern können, während diese Werte in zwei Textfeldern angezeigt werden. Ich habe diesen Code funktioniert, aber es behält die alten Werte auf der Leinwand sichtbar. Ich habe versucht, clearRect() zu verwenden, bevor ich strokeRect() aufrufen, aber das hat meine Schieberegler von der Arbeit gestoppt.

Kurz gesagt, ich möchte ein Rechteck auf die Leinwand zeichnen, und es so, dass zwei Schieberegler Größe ändern, einen für die Breite und einen für die Höhe. Ich bin relativ neu in der Programmierung, also weiß ich, dass ich wahrscheinlich einen offensichtlichen Fehler gemacht habe!

Hier ist meine JS-Code die Werte in die Textfelder für das Drucken und Zeichnen des Rechtecks:

$(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"); 
}); 

Und mein HTML-Code:

<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

hier ein paar Pannen in Ihrem Code :

• Sie verpassen ein Schlussangebot auf "100cm".
• Es gibt kein frameCanvas Element für var c2=document.getElementById("frameCanvas")

könnte es mehr Pannen - ich hielt die nach der Suche nach suchen.

Alternativ, könnten Sie für die change Ereignisse auf nativer input-type=range Elemente hören:

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>