1
<input type="range" name="range" id="range" data-input="input" value="0" max="70">

 <canvas id="rangearea" width="80" height="80"></canvas>

上のrangeの数値に合わせて、下のrangeareaの図形の半径を取得したいです。

$("#range").on("input", function(){
    lineWidth = $(this).val();
});   

rangeは、lineWidthの値を決めていますが、

var can = $("#rangearea")[0];
var ctx = can.getContext("2d");
    ctx.beginPath();
    ctx.fillStyle = "#00FFCC"
    ctx.arc(40,40,35, Math.PI*2,false);
    ctx.fill();

rangeareaの方は、半径が35とベタ書きになっています。
ここを、rangeの値と同様にするためにはどう記述したら良いでしょうか?

1 件の回答 1

1

上のrangeの数値に合わせて、下のrangeareaの図形の半径を取得したいです。

lineWidth の求め方はご存じですので、
さらにrangearea の半径を取得したいという真意がわかりませんでした。

おやりになりたいのは、このようなことでしょうか?

$("#range").on("change", function() {
  var lineWidth = $(this).val() * 1;
  $("#range-value").text(lineWidth);
  var can = $("#rangearea")[0];
  var ctx = can.getContext("2d");
  ctx.clearRect(0, 0, can.width, can.height);
  ctx.beginPath();
  ctx.fillStyle = "#00FFCC"
  ctx.arc(40, 40, lineWidth, Math.PI * 2, false);
  ctx.fill();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div>
  スライダーを動かして下さい<br>
  <input type="range" name="range" id="range" data-input="input" value="0" max="70">
  <label id="range-value"></label>
</div>
<canvas id="rangearea" width="80" height="80"></canvas>

$("#range").on("change", function(){
  var lineWidth = $(this).val() * 1;
  $("#range-value").text(lineWidth);
  var can = $("#rangearea")[0];
  var ctx = can.getContext("2d");
  ctx.clearRect(0, 0, can.width, can.height);
  ctx.beginPath();
  ctx.fillStyle = "#00FFCC"
  ctx.arc(40, 40, lineWidth, Math.PI*2,false);
  ctx.fill();    
});   
1
  • ありがとうございます。 改善しました。 Commented 2015年8月16日 0:52

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。