холст coffeescript не рисует - PullRequest
Новая
       11

холст coffeescript не рисует

0 голосов
/ 10 декабря 2011

Я пытаюсь перевести небольшой кусочек кода JavaScript (см. Закомментированный блок) в 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.Чего мне не хватает?

Ответы [ 2 ]

2 голосов
/ 10 декабря 2011

Вы забыли назначить y как свойство экземпляра, поэтому аргумент @y, передаваемый функциям рисования, равен undefined . 

@y = 5/8 * @canvas.height

Не связано: вы можете объявить class window.CanvasDrawing и отказаться от последней строки.

1 голос
/ 10 декабря 2011

Я думаю, проблема в том, что вы написали 

timeline.drawLine();

когда вы имели в виду 

canvasDrawing.drawLine();
...