coffeescriptキャンバスが描画に失敗する

私はjavascriptコードの小さな部分（コメントアウトされたブロックを参照）をcoffeescriptに翻訳しようとしていますが、キャンバスは空のままです。coffeescriptキャンバスが描画に失敗する

のCoffeeScript：

class CanvasDrawing 
    constructor: (canvasID) -> 
     @canvas = document.getElementById(canvasID) 
     @context = @canvas.getContext "2d" 

    drawLine: -> 
     y = 5/8 * @canvas.height 

     @context.beginPath() 
     @context.moveTo 0, @y 
     @context.lineTo @canvas.width, @y 
     @context.closePath() 
     @context.stroke() 
     pos = 
      start: 
       x: 0 
       y: @y 
      end: 
       x: @canvas.width 
       y: @y 

    window.CanvasDrawing = CanvasDrawing

HTML/Javascriptを：

<!DOCTYPE html> 
    <head> 
     <title>CanvasDrawing</title> 
     <script type="text/javascript" src="CanvasDrawing.js"></script> 
    </head> 

    <body> 
     <canvas id="canvas" style="width: 500px; height: 500px; border: 1px solid"></canvas> 

     <script type="text/javascript"> 
      var canvasDrawing = new CanvasDrawing("canvas"); 
      canvasDrawing.drawLine(); 
     </script> 

     <!-- 
     <script type="text/javascript"> 
      var canvas = document.getElementById("canvas"); 
      var context = canvas.getContext('2d'); 

      context.beginPath(); 
      context.moveTo(0, 5/8 * canvas.height); 
      context.lineTo(canvas.width, 5/8 * canvas.height); 
      context.closePath(); 
      context.stroke(); 
     </script> 
     --> 
    </body> 
</html>

かなり出力を生成しませんjavascriptのコードをコメントアウトしますが、Chromeで動作します。私は何が欠けていますか？

出典

2011-12-09 lowerkey

クラス宣言の後のコードは、自分のコードでインデントされています。それはペーストで失われた。 – lowerkey

私はcssでキャンバスの幅と高さを設定していません。彼らは適切な 'width'と' height'属性を持っています。おそらくそれらのショットを与える？ –

@herrturturインデントを修正しましたが、CoffeeScriptコードにタブとスペースが混在していると、それ自体が問題を示す可能性があります。 –

を意味するときには、インスタンスのプロパティとしてyを割り当てるのを忘れて、そう@y引数は描画に渡さ

timeline.drawLine();

を書いたということだけであると考えます関数はは未定義です。無関係

@y = 5/8 * @canvas.height

：あなたはclass window.CanvasDrawingを宣言し、その最後の行を捨てることができます。

出典

2011-12-10 01:38:45

クラスwindow.CanvasDrawingについてのヒント – lowerkey

私は、問題はあなたが

canvasDrawing.drawLine();

出典

2011-12-09 23:53:12

申し訳ありませんが、ただ修正しました。それは問題ではありません。以前はtimelineという名前の変数があり、このポストのインスタンスを変更するのを忘れていました。 – lowerkey

coffeescriptキャンバスが描画に失敗する

答えて

関連する問題