Question

我正在尝试获得PhysicsJS的基本demo，但我得到了我不理解的结果。

我有一个单页HTML文件，如下所示......

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>PhysicsJS</title>
  <style>
     body {
        background: white;
      }  
      #viewport {
        border: 1px solid #666;
      }
  </style>
</head>
<body>

<canvas id="viewport" width="500" height="500"></canvas>

<script src="http://wellcaffeinated.net/PhysicsJS/assets/scripts/vendor/physicsjs-0.6.0/physicsjs-full-0.6.0.min.js"></script>

<script>

    Physics(function(world){

      var renderer = Physics.renderer('canvas', {
        el: 'viewport',
        width: 500,
        height: 500
      });

      world.add( renderer );

      var square = Physics.body('rectangle', {
        x: 250,
        y: 250,
        width: 50,
        height: 50
      });

      world.add( square );
      world.render();
    });

</script>

在Safari浏览器中加载此代码时，我得到一个没有正方形的空白画布。

然而，当我打开调试工具并查看资源时，我将方块视为Base64图像。

屏幕截图：https://drive.google.com/file/d/0B0ANLX5liLSFM01uNmswX1VBNUE/edit?usp=sharing

老实说，我不知道我在哪里出错，为什么图像会这样呈现。

提前感谢您的帮助。

Answer 1

我认为这在技术上是一个＆＃34; bug＆＃34;。当渲染器首次创建实体图像时，它们将被缓存为图像。这可以通过以下方式完成：

var img = new Image();
img.src = canvas.toDataURL('image/png');
return img; //...

这意味着如果图像没有加载＆＃34;渲染器尝试渲染之前的数据网址，它不会显示出来。这通常不是问题，因为步进和渲染发生在循环中。所以下一次它会让它变好。但是safari似乎花了很多时间来加载数据URL ...所以只有一个渲染它不起作用。如果你想要你可以将其记录为github上的错误...但我怀疑你需要这个功能。只需设置循环就可以了。）

PhysicsJS基本演示失败

1 个答案: