I'm learning more programming and faced such a problem.
Separately, the drawTriangle function itself works, combining with the other — no longer.
Tell me what you did wrong, jquery connected last.

<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( 'Введите стороны треугольника', 'abc' ); 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 ba; } 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 answer 1

    Everything works, did you look at the console for errors?

    You firstly: the ctx variable is not passed to the lineTo function, you need to do this:

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

    And in the click event:

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

    Plus, I would add an event like this:

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

    http://jsfiddle.net/zwz75oax/