图像未在setInterval内更新

时间:2018-12-12 20:59:09

标签: animation canvas jupyter-notebook setinterval ijavascript

我正在jupyter笔记本下运行IJavascript内核。我在使用谷歌浏览器的mac OSX 10.10.5上运行,以显示通过标准anaconda安装安装的笔记本。 IJavascript是使用“ sudo npm install -g ijavascript”安装的。

我正在尝试使用setInterval命令使用画布来渲染简单的两个图像动画... 我可以使用console.log验证interval命令是否正确更新,但是映像本身不会更新。参见下面的代码:

var THREE = require('three');
var jsdom = require('jsdom');
var dom = new jsdom.JSDOM(`
<!doctype html>
<html>
    <head>
        <title>Jupyter-Test</title>
    </head>
    <body>
        <canvas id="canvas">
    </body>
</html>
`)
var width = 500;
var height = 500;

var canvas = dom.window.document.querySelector('#canvas');
var png1 = fs.readFileSync("assets/img/test1.png").toString("base64")
var png2 = fs.readFileSync("assets/img/test2.png").toString("base64")

var $d = $$.display("test")

var n=0;
setInterval(function() {
    $d.png([png2,png1][n++ % 2]);
    console.log(n)
},1000);

"Display Animation"

输出是png2引用的图像的静态渲染,后跟 1个 2 3 4 5 ... 每秒连续打印一次。 因此,间隔功能已正确触发,但是图像未如预期的那样更新。

0 个答案:

没有答案