JavaScript:HTML5和在页面上滑动球

说到HTML5和臭名昭著的画布元素，我是个新手。目前，我在我的网页上画了一个蓝色的球，点击canvas元素，球向上滑动到我传递给drawCircle函数的位置（Y）。我想把球滑到Y位置，而不是把球跳到Y位置

以下是我迄今为止的代码：

    var context, canvas;
var x = 100;
var y = 200;
var dx = 5;
var dy = .02;

function drawCircle(move) {
    if(move) {
        x = move.x
        y = move.y
    }

    canvas = document.getElementById('myCanvas');
    context = canvas.getContext('2d')
    context.clearRect(0,0,canvas.width, canvas.height);
    context.beginPath()
    context.fillStyle = "#0000ff";
    context.arc(x, y, 20, 0, Math.PI*2, true);
    context.closePath();
    context.fill();
    // if(x < 0 || x > canvas.width) dx=-dx;
    // if(y < 0 || y > canvas.height) dy =- dy;

    if(move) {
            y+=dy
    }

    // x+=dx
    // y+=dy
}

window.onload = function(e){
    // setInterval(drawCircle, 10)
    drawCircle()
    canvas.onclick = function(){
        var move = {
            x: 100,
            y: 100
        }
        drawCircle(move)
    }
}

var上下文，画布；
var x=100；
变量y=200；
var-dx=5；
var-dy=.02；
函数drawCircle（移动）{
如果（移动）{
x=移动.x
y=移动。y
}
canvas=document.getElementById（'myCanvas'）；
context=canvas.getContext（'2d'）
clearRect（0,0，canvas.width，canvas.height）；
context.beginPath（）
context.fillStyle=“#0000ff”；
弧（x，y，20，0，Math.PI*2，true）；
closePath（）；
context.fill（）；
//如果（x<0 | | x>canvas.width）dx=-dx；
//如果（y<0 | | y>canvas.height）dy=-dy；
如果（移动）{
y+=dy
}
//x+=dx
//y+=dy
}
window.onload=函数（e）{
//设定间隔（画圈，10）
画圈（）
canvas.onclick=function（）{
变量移动={
x:100，
y:100
}
画圈（移动）
}
}

---

jsiddle:

您可以像代码建议的那样使用

setInterval

函数，我就是这样做的

    var context, canvas;
    var x = 100;
    var y = 200;
    var dx = 5;
    var dy = 5; //0.02 makes it move v. slowly!

    function drawCircle(move) {
        if(move) {
            x = move.x
            y = move.y
        }

        context.clearRect(0,0,canvas.width, canvas.height);
        context.beginPath()
        context.fillStyle = "#0000ff";
        context.arc(x, y, 20, 0, Math.PI*2, true);
        context.closePath();
        context.fill();
    }

    window.onload = function(e){
        canvas = document.getElementById('myCanvas');
        context = canvas.getContext('2d');
        drawCircle()
        var interval;
        canvas.onclick = function(){
           if(interval) //don't run if already doing so..
                return;
            var end_move = {
                x: 100,
                y: 100
            };
            var interval = setInterval(function(){
                if(x === end_move.x && y === end_move.y){
                     //stop animation case..
                     clearInterval(interval);
                     interval = undefined;
                } else {
                    var newX;
                    if(Math.abs(x - end_move.x) < dx){
                       newX = x;
                    } else {
                        newX = (x > end_move.x) ? x-dx : x+dx;
                    }
                    var newY;
                    if(Math.abs(y - end_move.y) < dy){
                       newY = y;   
                    } else {
                        newY = (y > end_move.y) ? y-dy : y+dy;
                    }
                    drawCircle({
                        x: newX,
                        y: newY
                    });  
                }
            }, 10);
        }
    }

var上下文，画布；
var x=100；
变量y=200；
var-dx=5；
var-dy=5//0.02使其移动。慢点！
函数drawCircle（移动）{
如果（移动）{
x=移动.x
y=移动。y
}
clearRect（0,0，canvas.width，canvas.height）；
context.beginPath（）
context.fillStyle=“#0000ff”；
弧（x，y，20，0，Math.PI*2，true）；
closePath（）；
context.fill（）；
}
window.onload=函数（e）{
canvas=document.getElementById（'myCanvas'）；
context=canvas.getContext（'2d'）；
画圈（）
var区间；
canvas.onclick=function（）{
if（interval）//如果已经运行，则不运行。。
返回；
var end_move={
x:100，
y:100
};
var interval=setInterval（函数（）{
如果（x==end\u move.x&&y==end\u move.y）{
//停止动画案例。。
间隔时间；
间隔=未定义；
}否则{
var-newX；
if（Math.abs（x-end\u move.x）end\u move.x）？x-dx:x+dx；
}
var newY；
if（Math.abs（y-end\u move.y）end\u move.y）？y-dy:y+dy；
}
画圈({
x:newX，
y:新的
});  
}
}, 10);
}
}

---

代码设置了一个

结束位置

球应该结束的位置。然后，它设置一个间隔，在每次迭代中将其移动相同的距离，当它接近所需位置时，它通过将位置设置为所需位置来确保间隔终止

您不需要一直定义画布和设置上下文。这将处理向上滑动：

var context, canvas, target;
var x = 100;
var y = 200;
var dx = 5;
var dy = 2; //.2 is pretty slow

function drawCircle() {

    // sliding up
    if (y > target) {
        y -= dy;
    }
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath()
        context.fillStyle = "#0000ff";
        context.arc(x, y, 20, 0, Math.PI * 2, true);
        context.fill();
        context.closePath();

}

window.onload = function () {

    // get canvas, and context once
    canvas = document.getElementById('myCanvas');
    context = canvas.getContext('2d');

    // set target y position
    canvas.onclick = function (e) {
        target = e.clientY;
    }
    // 30fps
    setInterval(drawCircle, (1000 / 30));
}

---

非常感谢你的帮助！！我试着把我的想法放在canvas元素后面，呵呵，有太多的事情要做了——是的，当你可以在商业应用中实际使用它的时候，它会非常好！（虽然我们可能要等到2020年左右，IE8才不是必需的平台！）在1k JS竞赛中有一些使用canvas元素的非常酷的例子：哇，这看起来棒极了！而且看起来干净多了！Omar-因此，当前如果单击，球将移动到Y轴上的鼠标单击，但仅以向上运动的方式移动。我将如何使球移动到任何单击的位置？