Javascript 为什么我的代码要旋转针图像，在布朗运动下移动针的位置？为什么原点处的图像显示分散？

在，我有一个拟布朗运动，在刻度盘指针的角度上，每次迭代都会使时钟顺时针移动一度，逆时针移动一度，或者在这一瞬间不移动。它应该做一个分形的“摇摇欲坠的醉汉”

请注意，如果您加载该页面，“摇摇晃晃的醉汉”/“随机行走”图像将从屏幕外开始，但通常会在屏幕上摇摇晃晃

这是第一个问题。第二个问题是，图表的各个部分都设置为（0，0），我称之为acolution_CLOCK.context.setTransform（1，0，0，1，0，0）；重新开始，但手仍然分散出现

代码是：

        var ANCIENT_CLOCK = {};
        ANCIENT_CLOCK.dial_angle = 45;
        ANCIENT_CLOCK.draw_clock = function()
            {
            ANCIENT_CLOCK.context.setTransform(1, 0, 0, 1, 0, 0);
            ANCIENT_CLOCK.context.translate(100, 100);
            var height_ratio = ANCIENT_CLOCK.clock_face.height /
              jQuery(window).height();
            var width_ratio = ANCIENT_CLOCK.clock_face.width /
              jQuery(window).width();
            var ratio = null;
            if (height_ratio < width_ratio)
                {
                ratio = width_ratio;
                }
            else
                {
                ratio = height_ratio;
                }
            ratio = Math.max(1, 1 / ratio);
            ANCIENT_CLOCK.context.scale(ratio, ratio);
            ANCIENT_CLOCK.rendered_time = new Date();
            ANCIENT_CLOCK.context.drawImage(ANCIENT_CLOCK.clock_face, 0, 0);
            ANCIENT_CLOCK.context.setTransform(1, 0, 0, 1, 0, 0);
            ANCIENT_CLOCK.context.translate(0, 0);
            ANCIENT_CLOCK.hour_angle = ((ANCIENT_CLOCK.rendered_time
              .getTime() % (86400 * 1000 / 24)) / (( 86400 * 1000 / 24) * Math.PI));

            ANCIENT_CLOCK.context.setTransform(1, 0, 0, 1, 0, 0);
            ANCIENT_CLOCK.context.translate(100, 100);
            ANCIENT_CLOCK.context.rotate(2 * Math.PI * ANCIENT_CLOCK.hour_angle);
            ANCIENT_CLOCK.context.drawImage(ANCIENT_CLOCK.hour_hand, 0, 0);
            ANCIENT_CLOCK.context.setTransform(1, 0, 0, 1, 0, 0);
            ANCIENT_CLOCK.context.translate(0, 0);
            ANCIENT_CLOCK.minute_angle = ((ANCIENT_CLOCK.rendered_time
              .getTime() % (86400 * 1000 * 60)) /
              (86400 * 1000 * 60));

            ANCIENT_CLOCK.context.rotate(2 * Math.PI *
              ANCIENT_CLOCK.minute_angle);
            ANCIENT_CLOCK.context.drawImage(ANCIENT_CLOCK.minute_hand, 0, 0);
            ANCIENT_CLOCK.context.setTransform(1, 0, 0, 1, 0, 0);
            ANCIENT_CLOCK.context.translate(0, 0);
            ANCIENT_CLOCK.second_angle = (ANCIENT_CLOCK.rendered_time
              .getTime() % 86400 * 1000 * 3600) / (86400 * 1000 * 3600);
            ANCIENT_CLOCK.context.drawImage(ANCIENT_CLOCK.second_hand, 1000, 300);
            ANCIENT_CLOCK.context.setTransform(1, 0, 0, 1, 0, 0);
            if (ANCIENT_CLOCK.dial_angle < 1)
                {
                if (Math.random() < .5)
                    {
                    ANCIENT_CLOCK.dial_angle += 1;
                    }
                }
            else if (ANCIENT_CLOCK.dial_angle > 90)
                {
                if (Math.random() > .5)
                    {
                    ANCIENT_CLOCK.dial_angle -= 1;
                    }
                }
            else
                {
                if (Math.random() < 1 / 3)
                    {
                    ANCIENT_CLOCK.dial_angle += 1;
                    }
                else if (Math.random() < .5)
                    {
                    ANCIENT_CLOCK.dial_angle -= 1;
                    }
                }
            ANCIENT_CLOCK.context.setTransform(1, 0, 0, 1, 0, 0);
            ANCIENT_CLOCK.context.translate(0, 0);
            ANCIENT_CLOCK.context.rotate((ANCIENT_CLOCK.dial_angle / 90) *
              (Math.PI / 4) + Math.PI / 8);
            ANCIENT_CLOCK.context.drawImage(ANCIENT_CLOCK.dial_hand, 100,
              100);
            ANCIENT_CLOCK.context.setTransform(1, 0, 0, 1, 0, 0);
            }

var古代时钟={}；
古代时钟。表盘角度=45；
古代时钟。绘制时钟=函数（）
{
古代时钟.上下文.设置转换（1,0,0,1,0,0）；
古时钟。上下文。翻译（100100）；
var height\u ratio=古老的时钟。时钟面高度/
jQuery（window.height（）；
变宽比=古代时钟。时钟面。宽度/
jQuery（window.width（）；
var比率=零；
if（高度比<宽度比）
{
比率=宽度比；
}
其他的
{
比率=高度比；
}
比率=数学最大值（1，1/比率）；
古代时钟。上下文。刻度（比率，比率）；
古代时钟。呈现时间=新日期（）；
古代时钟.上下文.绘图图像（古代时钟.时钟面，0,0）；
古代时钟.上下文.设置转换（1,0,0,1,0,0）；
古时钟。上下文。翻译（0，0）；
古代时钟。小时角度=（（古代时钟。渲染时间）
.getTime（）%（86400*1000/24））/（（86400*1000/24）*Math.PI））；
古代时钟.上下文.设置转换（1,0,0,1,0,0）；
古时钟。上下文。翻译（100100）；
古时钟。上下文。旋转（2*Math.PI*古时钟。小时角）；
古时钟.上下文.绘图图像（古时钟.时针，0,0）；
古代时钟.上下文.设置转换（1,0,0,1,0,0）；
古时钟。上下文。翻译（0，0）；
古代时钟。分钟角度=（（古代时钟。渲染时间
.getTime（）%（86400*1000*60））/
(86400 * 1000 * 60));
古代时钟。上下文。旋转（2*Math.PI*
古代时钟（分角）；
古时钟.上下文.绘图图像（古时钟.分针，0,0）；
古代时钟.上下文.设置转换（1,0,0,1,0,0）；
古时钟。上下文。翻译（0，0）；
古代时钟。秒角=（古代时钟。渲染时间）
.getTime（）%86400*1000*3600）/（86400*1000*3600）；
古时钟。上下文。绘图图像（古时钟。秒针，1000300）；
古代时钟.上下文.设置转换（1,0,0,1,0,0）；
if（古时钟刻度盘角度<1）
{
if（Math.random（）<.5）
{
古代时钟。表盘角度+=1；
}
}
否则，如果（古代时钟.拨号角度>90）
{
if（Math.random（）>.5）
{
古代时钟。刻度盘角度-=1；
}
}
其他的
{
if（Math.random（）<1/3）
{
古代时钟。表盘角度+=1；
}
else if（Math.random（）<.5）
{
古代时钟。刻度盘角度-=1；
}
}
古代时钟.上下文.设置转换（1,0,0,1,0,0）；
古时钟。上下文。翻译（0，0）；
古时钟。上下文。旋转（（古时钟。拨盘角度/90）*
（数学PI/4）+数学PI/8）；
古代时钟。上下文。绘图图像（古代时钟。表盘指针，100，
100);
古代时钟.上下文.设置转换（1,0,0,1,0,0）；
}

关于这个问题，您可以使用以下函数组织和简化代码：

function secondsToRadians(seconds) {
    var degrees=(seconds-15)*6;
    var radians=(degrees * Math.PI)/180;
    return(radians);
}

组织到一个函数中的好处是，您只需要查找一个地方来查找错误/改进

创建以特定角度绘制任何时钟指针的函数，如下所示：

• 考虑两个参数：（1）时钟指针的图像，（2）绘制该指针的角度
• context.save（）保存画布的当前状态
• 翻译到时钟指针的中心
• 根据给定的角度旋转
• 绘制提供的图像
• restore（）将画布还原为未转换和未旋转状态

请注意，使用了

context.save

+

context.restore

，因此您不必担心在转换操作后使用标识转换或取消转换画布

通过对代码进行组织和简化，您可以更直接地攻击布朗扫描，让您专注于扫描而不是变换

由于您使用的是时间，因此一个以分/秒为单位并转换为弧度的函数非常有用。下面是这样一个函数：

function secondsToRadians(seconds) {
    var degrees=(seconds-15)*6;
    var radians=(degrees * Math.PI)/180;
    return(radians);
}

故事的寓意

如果您发现自己多次键入同一内容，请将其放入函数中

似乎你被这100行代码困住了——你在同一代码上问了5个问题

请（请！）查看这组有用的教程，这些教程涵盖了您在时钟项目中一直面临的问题

你应该在工作时掌握这些信息