PhysicsJS 基本演示失败答案

【问题标题】：PhysicsJS Basic Demo FailPhysicsJS 基本演示失败
【发布时间】：2014-09-10 23:43:37
【问题描述】：

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

我有一个如下的一页 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

老实说，我不知道我在哪里错了，为什么图像会这样渲染。

提前感谢您的帮助。

【问题讨论】：

难道它只在 Safari 中不起作用？我已将您的代码复制到小提琴中，它似乎可以在：Chomre、IE、Firefox：jsfiddle.net/bdLjdcnx 您尝试了多少次？可能只是网络错误。
感谢您的建议。我也让它在小提琴中工作，但在本地我遇到了问题。然而，它似乎在 Chrome 中工作。任何浏览器的控制台中也没有错误。我觉得它与文档加载有关。在本地和远程加载physics.js 脚本时，我也会得到不同的行为。文档没有提到需要等待“就绪”事件，但无论如何我都会尝试。

标签： javascript jquery html physicsjs

【解决方案1】：

我认为这在技术上是一个“错误”。当渲染器首次创建实体图像时，它们会被缓存为图像。这是通过这样做来完成的：

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

这意味着如果图像在渲染器尝试渲染它之前没有“加载”数据 url，它就不会显示出来。这通常不是问题，因为步进和渲染是在循环中发生的。所以下一次它会渲染它就好了。但是 safari 似乎在加载数据 URL 时度过了一段美好的时光……所以只有一个渲染它不起作用。如果您愿意，可以将其作为错误记录在 github 上……但我怀疑您是否需要此功能。只需设置循环，它就可以正常工作:)

【讨论】：