0

コードをコピーして実行すると、画面に何も表示されません。

<!DOCTYPE html>
<html lang="en">
<head>
  <script></script>
    <script src="js/jquery-1.9.1.js"></script>
  <script src="js/fabric.js"></script>
  <script>
        $(document).ready(function(){
   var circle = new fabric.Circle({
  radius: 20, fill: 'green', left: 100, top: 100
});
var triangle = new fabric.Triangle({
  width: 20, height: 30, fill: 'blue', left: 50, top: 50
});

canvas.add(circle, triangle);
});
</script>

</head>

<body>
  <div>
    <header>
      <h1>canvas</h1>
    </header>





</body>
</html>

これは私がコピーしたコードですが、何も表示されていません。

編集：：

私はこれを解決しました。body タグ内に要素を作成していません。

4

4 に答える 4

4

本文に canvs 要素を追加すると問題が解決しました:) ...

<!DOCTYPE html>
<html lang="en">
<head>
  <script></script>
    <script src="js/jquery-1.9.1.js"></script>
  <script src="js/fabric.js"></script>
  <script>
        $(document).ready(function(){
            var canvas = new fabric.Canvas('canvas');

var rect = new fabric.Rect({
  top: 100,
  left: 100,
  width: 60,
  height: 70,
  fill: 'red'
});
canvas.add(rect);
});
</script>

</head>

<body>
  <div>
    <header>
      <h1>canvas</h1>
    </header>
   <canvas id="canvas" width="300" height="300"></canvas>




</body>
</html>
于 2013-08-27T06:50:42.717 に答える
1

はい Simmi は正しいです。ページに Canvas 要素を追加する必要があります。

    <canvas id="canvas" width="300" height="300"></canvas>

ここにライブの例があります。http://jsfiddle.net/swapnilvathare/hxjZa/

于 2013-08-27T07:18:24.357 に答える
0

ドキュメント準備完了関数でスクリプト コードをラップする

$(document).ready(function(){
 //your code goes here
});
于 2013-08-27T06:31:48.273 に答える