0

在http://ancient-clock.stornge.com，我有打算在表盘针的角度上进行伪布朗运动，每次迭代将时钟顺时针移动一度，逆时针移动一度，或者不移动这个立即的。应该是做分形的“醉醺醺的”。

请注意，如果您加载页面，“令人震惊的醉酒”/“随机行走”图像会在屏幕外开始，但通常会在屏幕上错开。

那是问题 1。问题 2 是图表的各个部分都设置在 (0, 0) 并且我调用 ANCIENT_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);
            }
4

1 回答 1

1

在这个特定的问题上，您可以使用一个函数来组织和简化您的代码：

组织成一个函数的好处是你只需要在一个地方寻找错误/改进。

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

  • 接受 2 个参数：(1) 时钟指针的图像和 (2) 绘制指针的角度。
  • context.save() 保存画布的当前状态。
  • 平移到时钟指针的中心。
  • 根据给定的角度旋转。
  • 绘制提供的图像。
  • context.restore() 将画布恢复到未翻译和未旋转的状态。

请注意，使用了context.save+ context.restore，因此您不必担心使用身份转换或在转换操作后取消转换您的画布。

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

由于您正在处理时间，因此以分钟/秒为单位并转换为弧度的函数很有用。这是这样一个功能：

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

故事的寓意……</p>

如果您发现自己多次输入相同的内容，请将其放入函数中。

您似乎被困在这 100 行代码上——您已经针对同一代码提出了 5 个问题！

请（请！）查看这套有用的教程，这些教程涵盖了您在时钟项目中遇到的问题。

当您从事时钟项目时，您应该掌握这些信息……</p>

https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial

于 2013-05-02T15:37:13.403 回答