文章/答案/技术大牛

发布

社区首页 >问答首页 >PhysicsJS基本演示失败

问PhysicsJS基本演示失败
EN

Stack Overflow用户

提问于 2014-09-09 01:25:59

回答 1查看 473关注 0票数 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

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

提前感谢您的帮助。

javascript

jquery

html

physicsjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-09-10 15:43:37

我认为这在技术上是个"bug“。当主体的图像第一次由渲染器创建时，它们被缓存为图像。这是通过以下方式完成的：

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

这意味着，如果图像在渲染程序尝试呈现之前没有“加载”数据url，它就不会出现。这通常不是问题，因为步进和呈现发生在一个循环中。所以下一次它会使它变得很好。但是safari似乎需要很好的时间来加载数据URL.因此，只有一次渲染不起作用。如果你想要的话，你可以把这个记录在github上.但我怀疑你是否需要这个功能。只需设置循环，它就能正常工作:)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25735451

复制

相似问题

问PhysicsJS基本演示失败
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问PhysicsJS基本演示失败EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问PhysicsJS基本演示失败
EN