gpt4 book ai didi

javascript - 使用 'onchange' 更改变量的 HTML 输入范围

转载 作者:行者123 更新时间:2023-11-30 09:32:56 25 4
gpt4 key购买 nike

我希望使用范围 slider 来更改圆的半径,但是当我使用随范围 slider 更改的变量时,我无法在 Canvas 上绘制圆 - 谁能纠正我的错误'出错了吗?

代码:

<!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>

最佳答案

编辑:添加工作代码链接 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 事件。删除第一个将使它工作。

关于javascript - 使用 'onchange' 更改变量的 HTML 输入范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45246143/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com