スライダの値を使用してキャンバス要素の矩形のサイズを変更する

Question

スライダを使用してキャンバス上の矩形のサイズを変更できますが、これらの値は2つのテキストボックスに表示されます。このコードは動作していますが、キャンバスに古い値が表示されます。私はstrokeRect()に電話する前にclearRect()を使ってみましたが、それは私のスライダーの動作を停止しました。

要するに、私はキャンバスに矩形を描き、幅と高さの2つのスライダのサイズを変更するようにします。私は比較的新しいコーディングをしているので、私は明らかに間違いを犯したでしょう！ここで

は、テキストボックスに値を印刷し、四角形を描画するための私の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

ここにあなたのコード内の不具合のカップルです：

• の終了引用符がありません。
• 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>