0

PhysicsJS の基本的なデモを実行しようとしていますが、理解できない結果が得られています。

次のような1ページの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