8

速度計のキャンバス内の画像を移動するために、次のコードを使用します。

var meter = new Image,
    needle = new Image;
window.onload = function () {
    var c = document.getElementsByTagName('canvas')[0];
    var ctx = c.getContext('2d');
    setInterval(function () {
        ctx.save();
        ctx.clearRect(0, 0, c.width, c.height);
        ctx.translate(c.width / 2, c.height / 2);
        ctx.drawImage(meter, -165, -160);
        ctx.rotate((x * Math.PI / 180);
        / x degree   
            ctx.drawImage( needle, -13, -121.5 );
            ctx.restore();
        },50);
    };
    meter.src = 'meter.png';
    needle.src = 'needle.png';
}

ただ、スピードテストのページなど、入力した分だけ針をゆっくり動かしたい。何か案が？ありがとう。

4

1 に答える 1

7

このようなものが動作するはずです:

var meter = new Image,
    needle = new Image;
window.onload = function () {
    var c = document.getElementsByTagName('canvas')[0],
        ctx = c.getContext('2d'),
        x,        // Current angle
        xTarget,  // Target angle.
        step = 1; // Angle change step size.

    setInterval(function () {
        if(Math.abs(xTarget - x) < step){
            x = xTarget; // If x is closer to xTarget than the step size, set x to xTarget.
        }else{
            x += (xTarget > x) ?  step : // Increment x to approach the target.
                 (xTarget < x) ? -step : // (Or substract 1)
                                  0;
        }
        ctx.save();
        ctx.clearRect(0, 0, c.width, c.height);
        ctx.translate(c.width / 2, c.height / 2);
        ctx.drawImage(meter, -165, -160);
        ctx.rotate((x * Math.PI / 180); // x degree  
            ctx.drawImage( needle, -13, -121.5 );
            ctx.restore();
        },50);
    };
    dial.src = 'meter.png';
    needle.src = 'needle.png';
}

ここでは省略形を使用して、if / elseに加算するか1、x減算するか1、または何もしないかを決定しています。機能的には、これは次と同じです。

if(xTarget > x){
    x += step;
}else if(xTarget < x){
    x += -step;
}else{
    x += 0;
}

しかし、それはより短く、私の意見では、 if (三項演算子) がどのような省略表現であるかを知っていれば、同じくらい読みやすいと思います。

xこのコードは整数値であると想定していることに注意してください(したがって、float ではなく、単に丸められた int です)。

于 2012-12-19T08:56:27.353 に答える