0

我正在尝试为 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

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

提前感谢您的帮助。

4

1 回答 1

0

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

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

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

于 2014-09-10T15:43:37.670 回答