Javascript，在 canvas 上绘制时 setInterval() 或 increment (i+=) 不起作用？（Javascript/coding 的新手）

Question

我正在尝试从 canvas 上的单击位置通过 canvas 为框的描边设置动画。

正方形在单击的 canvas 上绘图，但 p & q values/variables 不是 updating/incrementing。

当我运行一个不以clientX和clientY为起始位置的类似function()时，它起作用并根据增量值绘制正方形。

感谢任何帮助。

var clickx = []
var clicky = []

addEventListener("click", clickInfo);
addEventListener("click", drawSquare1);

function clickInfo(){
    j = event.clientX;
    k = event.clientY;
    clickx.push(j)
    clicky.push(k)      
}

function drawS(){
    p = clickx[0]
    q = clicky[0]   
    ctx.beginPath();
    ctx.rect(p, q, 40, 40);
    ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
    ctx.stroke();
    ctx.closePath();
    P += 5;
    q += 5;
}

function drawSquare1(){
    setInterval(drawS, 5);
}

Answer 1

变量 p 和 q 没有递增，因为每次调用 drawS 时它们都被重置为相同的值（如 rgthree 所指出的）。

要解决此问题，您应该按如下方式设置...

var p = 0,
    q = 0;

function drawS() {

    // increase by 5
    p += 5;
    q += 5;

    //... do stuff
}

function drawSquare1() {

    // initial values before loop
    p = clickx[0];
    q = clicky[0];

    // start loop
    setInterval (drawS, 5);
}

Javascript，在 canvas 上绘制时 setInterval() 或 increment (i+=) 不起作用？（Javascript/coding 的新手）

Javascript, while drawing on a canvas setInterval() or increment (i+=) is not working? (New to Javascript/coding)

html

javascript

canvas

increment

setinterval

Javascript，在 canvas 上绘制时 setInterval() 或 increment (i+=) 不起作用？ （Javascript/coding 的新手）

Javascript, while drawing on a canvas setInterval() or increment (i+=) is not working? (New to Javascript/coding)

html

javascript

canvas

increment

setinterval

Javascript，在 canvas 上绘制时 setInterval() 或 increment (i+=) 不起作用？（Javascript/coding 的新手）