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/자바 스크립트 :

<!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>

예쁜 출력을 생성하지 않는 자바 스크립트 코드를 주석,하지만 크롬에서 작동합니다. 내가 무엇이 누락 되었습니까?

출처

2011-12-09 lowerkey

클래스 선언 후의 코드가 내 코드에서 들여 쓰기되어 있습니다. 그것은 붙여 넣기에서 길을 잃었다. – lowerkey

나는 css로 내 캔버스의 너비/높이를 설정 한 적이 없다. 그들은 적절한'width'와'height' 속성을 가지고 있습니다. 아마도 그걸 쐈어? –

@herrturtur 들여 쓰기를 수정했는데 CoffeeScript 코드에 탭과 공백이 섞여 있으면 문제가 될 수 있습니다. –

을 의미 할 때 당신은 인스턴스의 속성으로 y를 할당하는 것을 잊었다

timeline.drawLine();

을 쓴 단순히 생각, 그래서 @y 인수는 도면에 전달 함수는 이며 정의되지 않음은입니다. 관련없는

@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 캔버스가 그려지지 않습니다

답변

관련 문제