HTML5 Canvas анимация clearRect - PullRequest
Новая
       3

HTML5 Canvas анимация clearRect

0 голосов
/ 10 ноября 2011

Я только начал HTML5. У меня проблема с созданием линии, следующей за мышью. Это работает, если я не clearRect (если я удаляю строку context.clearRect (0, 0, canvas.width, canvas.height);). Любая идея? Я прикрепил код. Спасибо 

<html>
<head>
    <title>Test</title>
</head>
<body>
    <canvas id="myCanvas" width="1000" height="600" style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>
    <script type="text/javascript">

        window.onload = function()
        {

        };

        function captureMousePosition(evt) 
        {
            var c = document.getElementById("myCanvas");
            var context = c.getContext("2d");

            context.clearRect(0, 0, canvas.width, canvas.height);
            context.strokeStyle = 'rgba(0,153,255,0.4)';  
            context.beginPath();
            context.moveTo(0,0);
            context.lineTo(evt.x, evt.y);
            context.stroke();         
        }
        document.captureEvents(Event.MOUSEMOVE);
        document.onmousemove = captureMousePosition;

    </script>
</body>

Ответы [ 2 ]

3 голосов
/ 10 ноября 2011 
context.clearRect(0, 0, canvas.width, canvas.height);

Очистит весь холст, удалив линию, которая была на холсте до сих пор.

Одно из решений - очистить холст только один раз перед началом рисования.Например, очистите холст в событии window.onLoad (), а затем очистите его только при запуске нового чертежа.

Вторым решением было бы сохранить каждое движение мыши в длинном массиве и перерисовать его.полная строка в каждом кадре.

редактировать: обновить с учетом ваших разъяснений ниже.Код не работает из-за синтаксической ошибки в коде clearRect.Вы используете «холст», который не определен.

context.clearRect(0, 0, c.width, c.height);

добивается цели!

1 голос
/ 10 ноября 2011

Я создал jsFiddle для вашей проблемы.Для меня проблема была в evt.x и evt.y, они были неопределенными.Я вставил свои собственные функции, чтобы получить координаты мыши.Вы можете использовать простой способ, но это самый надежный способ.

http://jsfiddle.net/g9xQ2/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...