Question

尝试在画布上放置圆形对象，并根据范围滑块输入（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>

Answer 1

您收到有关[对象HTMLInputElement]的错误的原因是您尝试编写变量cx或cy，而他们是两个DOM对象（您的滑块））。如果您想要写出他们所代表的值，您应该分别询问cx.value和cy.value。

此外，您似乎已经创建了两次事件监视器，一个＆＃34;正常＆＃34;和一个使用jQuery。

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

另外，如果您愿意，可以删除顶部的$(function(){和最后的});以使其成为非jQuery。

＆＃13;

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', draw, true);
cy.addEventListener('change', draw, true);

var radius=3;
draw();

function draw(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.beginPath();
  ctx.arc(cx.value,cy.value,radius,0,PI2);
  ctx.closePath();
  ctx.stroke();
  console.log("X range, X axis: " + cx.value);
  console.log("X range, Y axis: " + cy.value);
}

＆＃13;

canvas {
    border:1px solid black;
}

＆＃13;

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

＆＃13;

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

1 个答案: