使用范围滑块控制 canvas 个对象

Question

尝试将圆形对象放置在 canvas 上，并根据范围滑块输入 (x, y) 更改对象的位置。当前对象未放置在 canvas 上，而不是 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

您收到关于 [object HTMLInputElement] 错误的原因是您尝试编写变量 cx 或 cy 而它们都是 DOM 对象（你的滑块）。如果你想写出它们代表的值，你应该分别要求cx.value和cy.value。

此外，您似乎已经创建了两次事件监听器，一次 "normal" 一次使用 jQuery。

我记得您之前提出的一个问题中的这段代码以及来自 markE 的评论，尝试将两个绘制函数合并为一个并使用滑块中的值。代码会更简洁更好看，见下文

您还可以删除顶部的 $(function(){ 和末尾的 });，使其成为非 jQuery，如果您愿意的话。

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);
}

canvas {
    border:1px solid black;
}

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

使用范围滑块控制 canvas 个对象

Controlling canvas object with range slider

javascript

canvas

slider