0

HTML5と悪名高いCanvas要素に関しては、私は初心者です。現在、Webページに青いボールが描画されており、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/

4

2 に答える 2

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コードは、ボールがどこに到達するかを設定します。次に、各反復で同じ距離を移動する間隔を設定します。目的の位置に近づくと、位置を目的の位置に設定することで、間隔が確実に終了します。

于 2012-01-17T22:45:53.410 に答える
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));
}
于 2012-01-17T22:51:28.610 に答える