Javascript 使用范围滑块控制画布对象

尝试在画布上放置圆形对象，并根据范围滑块输入（x，y）更改对象的位置。当前，对象未放置在画布上，而var cx/cy是一个数值，它们将作为[object HTMLInputElement]返回

为什么?

JS代码：

$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=6;
    ctx.strokeStyle='green';

    var PI2=Math.PI*2; //place the circle on canvas
    var cx = document.getElementById('xpos');
    var cy = document.getElementById('ypos');

    cx.addEventListener('change', drawX, true);
    cy.addEventListener('change', drawY, true);

    var radius=3;
    drawX(0);
    drawY(0);

    var $xpos=$('#xpos');
    $xpos.on('change',function(){
        drawX(parseInt($xpos.val()));
        console.log("hori: " +xpos);
        x = cx;
    });

    var $ypos=$('#ypos');
    $ypos.on('change',function(){
        drawY(parseInt($ypos.val()));
        console.log("vert: " +ypos);
        y = cy;
    });

    function drawX(x){

        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();
        ctx.arc(x,cy,radius,0,PI2);
        ctx.closePath();
        ctx.stroke();
        console.log("X range, X axis: " + cx);
        console.log("X range, Y axis: " + cy);
    }

    function drawY(y){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();
        ctx.arc(cx,y,radius,0,PI2);
        ctx.closePath();
        ctx.stroke();
        console.log("Y range, X axis: " + cx);
        console.log("Y range, Y axis: " + cy);
    }

});

HTML输入

 <label>X-pos<input type=range id=xpos min=0  value=150 max=300 step=1></label><br>
    <label>Y-pos<input type=range id=ypos min=0 value=150 max=300 step=1></label><br>
    <canvas id="canvas" width=300 height=300></canvas>

X-pos

Y-pos

关于[object HTMLInputElement]出现错误的原因是您试图编写变量

cx

或

cy

，而它们都是DOM对象（您的滑块）。如果你想写它们代表的值，你应该分别要求

cx.value

和

cy.value

此外，您似乎已经创建了两个EventListener，一个是“普通”的，另一个是使用jQuery的

我记得你上一个问题中的代码，在处理markE的注释时，尝试将两个绘图函数合并为一个，并使用滑块中的值。代码将更紧凑、更好，见下文

您还可以删除

$（函数（）{

在顶部和

}）将其设置为非jQuery


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.线宽=6；
ctx.strokeStyle='green'；
var PI2=数学PI*2//将圆圈放在画布上
var cx=document.getElementById（'xpos'）；
var cy=document.getElementById（'ypos'）；
cx.addEventListener（“更改”，绘制，真实）；
cy.addEventListener（“更改”，绘制，真实）；
var半径=3；
draw（）；
函数绘图（）{
clearRect（0,0，canvas.width，canvas.height）；
ctx.beginPath（）；
ctx.弧（cx.值，cy.值，半径，0，PI2）；
ctx.closePath（）；
ctx.stroke（）；
console.log（“X范围，X轴：+cx.value”）；
console.log（“X范围，Y轴：+cy.value”）；
}
画布{
边框：1px纯黑；
}
X-pos

Y-pos

非常感谢！我现在可以看到，我有冲突的代码片段，剥离它们创建了所需的功能。我很高兴我能提供帮助。只是为了好玩，我点了一下eventlisteners，并添加了一个连续的循环，画点，画滑块上的值。这样，当滑块移动时，圆点将立即移动，请查看：