14448

[code]

    <input type="range" name="range" id="range" data-input="input" value="0" max="70">
    
     <canvas id="rangearea" width="80" height="80"></canvas>
    
[/code]

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

[code]

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

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

[code]

    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();
    
[/code]

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


CC BY-SA 3.0
2015-08-15T09:12:37.577
14442
2019-12-13T19:02:15.827
8415
question
javascript jquery html5-canvas
rangeの値に合わせてarcで図形を生成したい


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

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

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

[code]

    $("#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();
    });
[/code]

[code]

    <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>
[/code]

[code]

    $("#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();    
    });   
    
[/code]


CC BY-SA 4.0
2015-08-15T15:40:25.467
14448
2019-12-13T19:02:15.827
2019-12-13T19:02:15.827
32986
7471
14442
answer