Question

我希望使用范围滑块来更改圆的半径，但是当我使用通过范围滑块更改的变量时，我无法设法在画布上绘制圆圈 - 任何人都可以纠正我的位置出了问题？

代码：

<!DOCTYPE html>
<html>
    <head>
        <link rel='stylesheet' type='text/css' href='StylesheetSlider.css'/>
    </head>
    <body>
        <h1>Test Slider</h1>
        <p>Slider Options</p>
        <label for = "radius">Radius:</label>
        <br>
        <input type="range" onchange="this.setAttribute('value',this.value);" min="50" max="500" value="50" onchange = "changeRad(this.value);"/>
        <canvas id="canvas" width="5000" height="5000">
        </canvas>
        <script>
            function changeRad(r) {
                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext("2d");
                ctx.beginPath();
                ctx.arc(50, 50, r, 0, 2 * Math.PI);
                ctx.stroke();
                ctx.closePath();
            }
        </script>
    </body>
</html>

Answer 1

编辑：添加工作代码链接 Check Code here

  <h1>Test Slider</h1>
    <p>Slider Options</p>
    <label for = "radius">Radius:</label>
    <br>
    <input type="range" min="50" max="500" value="50" onchange = "sample(this.value); changeRad(this.value);"/>
    <canvas id="canvas" width="5000" height="5000">
    </canvas>
    <script>
    function changeRad(r) {
                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext("2d");
                ctx.beginPath();
                ctx.arc(50, 50, r, 0, 2 * Math.PI);
                ctx.stroke();
                ctx.closePath();
              console.log(r);
    }

    function sample(r){
      console.log("second function",r)
    }
    </script>

您在输入标记中放了两个onchange事件。删除第一个将使其工作。

HTML输入范围使用'onchange'来更改变量

1 个答案: