PhysicsJS基本演示失败

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

老实说，我不知道哪里出了问题，也不知道为什么图像会呈现这样的效果。

提前感谢您的帮助。

我认为这在技术上是一个"bug"。当渲染器首次创建实体的图像时，这些图像将缓存为图像。这是通过做来完成的：

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

这意味着，如果图像在渲染器尝试渲染之前没有"加载"数据url，它将不会显示。这通常不是问题，因为步进和渲染是在循环中进行的。所以下一次它会让它变得很好。但safari似乎在加载数据URL时度过了一段甜蜜的时光。。。因此仅在一个渲染上它不起作用。如果你愿意，你可以将其作为一个bug记录在github上。。。但我怀疑你是否需要这个功能。只需设置循环，它就会正常工作：）

相关内容

最新更新

热门标签：