JavaScript：HTML5并在页面上滑动球

Question

对于HTML5和臭名昭着的Canvas元素，我是一个新手 。 目前，我在我的网页上绘制了一个蓝色的球，点击了画布元素后，球滑到一个位置（Y），我将其传递给drawCircle函数。 我想将球滑到 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

您可以像建议的代码一样使用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 ，其中球应该结束。 然后它设置一个间隔以在每次迭代时将其移动相同的距离，当它接近所需位置时，它通过将位置设置为所需位置来确保间隔终止。

Answer 2

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

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