如何缓慢移动帆布车速表指针？

Posted 2023-05-07

【中文标题】如何缓慢移动帆布车速表指针？

【英文标题】：How to move canvas speedometer needle slowly?

【发布时间】：2012-12-06 13:41:39

【问题描述】：

我使用以下代码在画布中为我的速度计移动图片。

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';
   

但是我想将指针慢慢移动到我输入的程度，例如速度测试网页。任何想法？ 谢谢。

【参考方案1】：

这样的事情应该可以工作：

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 (ternary operator) 的简写是什么样子，它就很容易阅读。

请记住，这段代码假定x 是一个整数值（所以，不是浮点数，只是一个四舍五入的整数）。