As planned, after the first mouse click, the first point of the apex of the triangle appears. After the second two points must be connected by a segment.

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; }

The transition to the second CASE is correct, checked. Variables work correctly: X and Y change after each mouse click. If you put all the code together inside a single CASE, it draws as needed. Tried without BRAKE (what if?) - does not help. Tried closePath () in the second CASE - does not help.

(addition) When I wrote this code apart from the rest of the script, it all worked, thanks for offering to create an example. Now I know for sure what should work, I will look for a mistake in somewhere else. Here is a working example:

 <!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>

Everything turned out to be simple, when you clicked the mouse, even before SWITCH in the script was beginPath (). Thus, without finishing one piece, I started another.

  • little code. Where is ctx created? Language - javascript? Create a working example using the "Fragment of code on ..." editor button - Igor
  • When I wrote this code apart from the rest of the script, everything worked, thanks for offering to create an example. Now I know what should work, I will look for a mistake somewhere else. - Vitaly Komarov
  • one
    Everything turned out to be simple, when you clicked the mouse, even before SWITCH in the script was beginPath (). Thus, without finishing one piece, I started another. - Vitaly Komarov
  • You can answer your question yourself below, by giving an erroneous code snippet and fixing it, and accept the answer as correct. I will vote for him too. - Igor

1 answer 1

In my full code, when I clicked the mouse, even before SWITCH, there was a beginPath () command. However, when, among other figures, I added the ability to draw a triangle, I did not notice that this beginPath () for a triangle is unacceptable, because before reaching CASE1, it marks the beginning of the next figure. Thus, the connection with the point drawn in CASE0 was lost.

Invalid code fragment:

 function onMouseDown(e) { X = e.offsetX; Y = e.offsetY; ctx.beginPath(); // рисованиС Ρ€Π°Π·Π½Ρ‹Ρ… Ρ„ΠΈΠ³ΡƒΡ€ Π² зависимости ΠΎΡ‚ значСния ΠΊΠ»ΡŽΡ‡Π° 'drawMethod' draw();

Fragment of the correct code:

  function onMouseDown(e) { X = e.offsetX; Y = e.offsetY; if(drawMethod !== 'triangle') ctx.beginPath(); // рисованиС Ρ€Π°Π·Π½Ρ‹Ρ… Ρ„ΠΈΠ³ΡƒΡ€ Π² зависимости ΠΎΡ‚ значСния ΠΊΠ»ΡŽΡ‡Π° 'drawMethod' draw();