HTML5 Canvas анимация clearRect

Я только начал 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>


html html5-canvas
person Radu Paise    schedule 10.11.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

http://jsfiddle.net/g9xQ2/

person Shamaila Tahir    schedule 10.11.2011

arrow_upward
3
arrow_downward 

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

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

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

Второе решение - хранить каждое движение мыши в длинном массиве и перерисовывать эту полную строку каждый кадр.

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

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

делает свое дело!

person Willem Mulder    schedule 10.11.2011
comment
Я хочу видеть только одну строку, которая соединяет (0, 0) с положением мыши. Без clearRect появляются все строки. Если я добавлю clearRect, линия не будет нарисована (должна быть одна и только одна). - person Radu Paise; 10.11.2011
comment
Я обновил свой ответ решением. Используйте определенную «c» вместо неопределенного «холста». - person Willem Mulder; 10.11.2011