1

По задумке, после первого клика мышью появляется первая точка вершины треугольника. После второго две точки должны соединиться отрезком.

var X, Y            // координаты каждого следующего нажатия мыши 
var triCount = 0    // сколько вершин треугольника уже отмечено

...

switch(triCount) {

// первый клик мышью
case 0:
    ctx.beginPath();
    ctx.rect(X, Y, 1, 1);     // отмечаем первую вершину треугольника 
    ctx.stroke();             // делаем точку видимой
    triCount++;               // увеличиваем triCount до 1
    break;

// нажимаем кнопку мыши во второй раз получая X и Y для второй вершины
// попадаем в CASE1

case 1:             
    ctx.lineTo(X, Y);       // не рисует линию от предыдущей точки
    ctx.stroke();
    break;
}

Переход во второй CASE происходит корректно, проверял. Переменные работают корректно: X и Y меняются после каждого клика мышки. Если поставить весь код вместе внутри одного CASE, то рисует как нужно. Пробовал без BRAKE (а вдруг?) - не помогает. Пробовал closePath() во втором CASE - не помогает.

(дополнение) Когда выписал этот код отдельно от остального скрипта все заработало, спасибо что предложили создать пример. Теперь знаю точно, что должно работать, буду искать ошибку в где-то другом месте. Вот рабочий пример:

<!doctype html>
<html>
<body>

<canvas id="canvas" width="600" height="400"></canvas>

<script>    
window.addEventListener('load', function() {

var triCount = 0;
var X = 0;
var Y = 0;

var ctx = canvas.getContext('2d');

canvas.addEventListener('mousedown', onMouseDown, false);

function onMouseDown(e) { 

    X = e.offsetX;
    Y = e.offsetY;

    switch(triCount) {

        case 0:
            ctx.beginPath();
            ctx.rect(X, Y, 1, 1);
            ctx.stroke();
            triCount++;
            break;

        case 1:             
            ctx.lineTo(X, Y);
            ctx.stroke();
            break;
        }
    }
});

</script>
</body>
</html>

Все оказалось просто, при нажатии мыши, еще до SWITCH в скрипте стоял beginPath(). Таким образом, не закончив одной фигуры я начинал другую.

4
  • мало кода. Где создается ctx? Язык - javascript? Создайте работающий пример, используя кнопку редактора "Фрагмент кода на ..."
    – user176262
    25 ноя 2016 в 21:31
  • Когда выписал этот код отдельно от остального скрипта все заработало, спасибо что предложили создать пример. Теперь знаю что работать должно, буду искать ошибку в где-то другом месте. 25 ноя 2016 в 22:00
  • 1
    Все оказалось просто, при нажатии мыши, еще до SWITCH в скрипте стоял beginPath(). Таким образом, не закончив одной фигуры я начинал другую. 25 ноя 2016 в 22:26
  • Вы можете ниже ответить на Ваш вопрос сами, приведя ошибочный фрагмент кода и его исправление, и принять ответ как правильный. Я тоже за него проголосую.
    – user176262
    25 ноя 2016 в 22:31

1 ответ 1

1

В моем полном коде, при нажатии мыши, еще до SWITCH, стояла команда beginPath(). Однако, когда среди прочих фигур, я добавил возможность рисовать треугольник, то не заметил, что этот beginPath() для треугольника недопустим, так как еще не добравшись до CASE1 он обозначает начало следующей фигуры. Таким образом терялась связь с точкой нарисованной в CASE0.

Фрагмент неверного кода:

function onMouseDown(e) {

    X = e.offsetX;
    Y = e.offsetY;

    ctx.beginPath();

    // рисование разных фигур в зависимости от значения ключа 'drawMethod' 
    draw();

Фрагмент верного кода:

 function onMouseDown(e) {

        X = e.offsetX;
        Y = e.offsetY;

        if(drawMethod !== 'triangle')
           ctx.beginPath();

        // рисование разных фигур в зависимости от значения ключа 'drawMethod' 
        draw();

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.