同样的效果同样的代码,在node端绘制动画和在浏览器中绘制的结果不一样 · Issue #255 · spritejs/spritejs · GitHub
Skip to content

同样的效果同样的代码,在node端绘制动画和在浏览器中绘制的结果不一样 #255

Open

Description

@Liting1

我使用的环境是:
系统环境:win10
node版本: 12.20.2
node-canvas版本:2.8.0
node-canvas-webgl版本:3.7.38
spritejs版本:3.7.38

我在画布上通过使用transition方法 移动一个机器人的图片
大致代码如下

// 绘制机器人
await this.drawRobot();
 let s = 0;
 setInterval(() => {
    // 记录机器人的坐标
     console.log(++s ,'------', this.robot.worldPosition);
}, 1000 / 25)

for (let i = 0; i < this.map.length; i++) {
      this.currentAddress = this.map[i];
      console.log(this.currentAddress.name);
      await this.robotMove();
}

async robotMove() {
        await new Promise((resolve) => {
            this.timer = setTimeout(async () => {
                const [x, y] = this.currentAddress.original;
                await this.robot.transition(1.0).attr({
                    pos: [x, y]
                });
                console.log('robot', x, y)
                this.robotAnimate(x, y);
                resolve();
            }, 1000);
        })
    }

运行坐标不一致的图如下

1

在浏览器中正常运行的效果如下
2

我想知道这到底是哪里的问题,可以麻烦帮忙看一下吗,我找了很久也不知道是哪里出了问题

详细代码地址:https://github.com/Liting1/canvasToMP4
demo.html 为浏览器中运行的效果
node index.js 直接运行为node中的效果

还有一个奇怪的地方就是我在node端绘制其他动画效果都是和浏览器中的一样,只有这个机器人移动的动画有问题

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions