JavaScript：HTML5 和在页面上滑动球

Question

当谈到 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)
    }
}

JSFiddle: http://jsfiddle.net/Uam8z/1/

Answer 1

您无需继续定义画布并设置上下文。这处理向上滑动：

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

Answer 2

您可以像您的代码所建议的那样使用 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);
        }
    }

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