1

Учусь еще программировать и столкнулся с такой проблемой.
Отдельно сама функция drawTriangle работает, совмещаю с другой - уже нет.
Подскажите, что сделал не так, jquery подключен последний.

<script>

var points = [];

var bool = confirm('Что бы нарисовать треугольник нажмите Ок \n' +
'Чтобы ввести значения вручную Отмена');

if (bool) {
    drawwTriangle()
} else {
    valueTrianle()
}
typTriangle(points);

function valueTrianle() {
    var flag = true;

    numjoin:
            while (flag) {

                var strnum = prompt( 'Введите стороны треугольника', 'a b c' );

                points = strnum.split(' ');

                points.sort(compareNumeric);

                for (i = 0; i < points.length; i++) {
                    if ( !isNumeric(points[i]) || parseInt(points[i], 10) <= 0 ) {
                        alert('Введены не стороны треугольника!');
                        continue numjoin;
                    }
                }

                if ( parseInt(points[0], 10) <= parseInt(points[1], 10) + parseInt(points[2], 10) ) {
                    flag = false;
                } else {
                    alert('Треугольник нельзя построить');
                }
            }
}

function drawwTriangle() {
    var canv = document.createElement('canvas');
    canv.id = 'example';
    document.body.appendChild(canv);

    var example = document.getElementById("example");
    var ctx     = example.getContext('2d');
    example.height = 480;
    example.width  = 640;
    ctx.strokeStyle = '#B70A02';

    alert('asfasfasfasf \n dsgasdgasdgasdgasd\n dgfasdgsdagasdgas\n asdgadsgasdg');

    $('canvas').bind('click', function(e) {

        var x1 = e.pageX - 8;
        var y1 = e.pageY - 8;
        var x2;
        var y2;

        points.push(x1, y1);

        this.onmouseup = function () {
            x2 = e.pageX - 8;
            y2 = e.pageY - 8;
        };

        if (points.length < 7) {
            lineTo(x1, y1, x2, y2)
        } else {
            var a = points[6] - points[0];
            var b = points[7] - points[1];

            if (Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)) <= 10) {
                lineTo(x2, y2, points[0], points[1])
            }
        }

        x1 = x2;
        y1 = y2;

        if (points.length > 6) {
            this.onmousedown = null;
            vvalueLine(points);
        }
    })
}

function isNumeric(n) {

    return !isNaN(parseFloat(n)) && isFinite(n);
}

function typTriangle(arr) {

    if (Math.pow(+arr[2], 2) > Math.pow(+arr[0], 2) + Math.pow(+arr[1], 2)) {
        alert('Тупоугольный')
    } else {
        if (Math.pow(+arr[2], 2) < Math.pow(+arr[0], 2) + Math.pow(+arr[1], 2)) {
            alert('Остроугольный');
        } else {
            alert('Равноугольный');
        }
    }
}

function compareNumeric(a, b) {

    return b-a;
}

function lineTo(firstCoordsX, firstCoordsY, lastCoordsX, lastCoordsY) {
    ctx.beginPath();
    ctx.moveTo(lastCoordsX, lastCoordsY);
    ctx.lineTo(firstCoordsX, firstCoordsY);
    ctx.stroke();
}

function vvalueLine(arr) {
    var nnewArr = [];
    for ( i = 0; i < 6; i += 2 ) {
        var  a = points[i]-points[i+2];
        var b = points[i+1]-points[i+3];
        a = Math.round(Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)));
        nnewArr.push(a);
    }
    arr = nnewArr;
}

</script>

1 ответ 1

0

Всё работает, вы консоль смотрели на наличие ошибок?

У вас во-первых: не передается в функцию lineTo переменная ctx, надо сделать так:

function lineTo(ctx, firstCoordsX, firstCoordsY, lastCoordsX, lastCoordsY) {
    ctx.beginPath();
    ctx.moveTo(lastCoordsX, lastCoordsY);
    ctx.lineTo(firstCoordsX, firstCoordsY);
    ctx.stroke();
}

И в событии click:

lineTo(ctx, x1, y1, x2, y2);

Плюс я бы добавлял событие так:

$(canv).on('click', function(e) {...});

http://jsfiddle.net/zwz75oax/

Ваш ответ

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

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