I make a drawing, and for her an asterisk-shaped brush. The size of the asterisk is arbitrary, and the form itself is given in polar coordinates relative to the center. Accordingly, sine and cosine are used, returning non-integer numbers.

Question: when I try to draw something based on these coordinates, are these numbers rounded to integers or somehow taken into account?

The problem is that the edges of the lines look very clumsy and I suspect that the coordinates are rounded.

enter image description here

The code is repeated every time the addClick function receives new coordinates.

var shape; const buf = 0.6; // const buf = 1; shape = [0, 1, 36, buf, 72, 1, 108, buf, 144, 1, 180, buf, 216, 1, 252, buf, 288, 1, 324, buf]; // Star // shape = [135, 1, 315, 1]; // Slash // shape = [133, 1, 137, 1, 313, 1, 317, 01]; // Slash // shape = [45, 1, 225, 1]; // Backlash // Π‘ΠΌΠ΅Ρ‰Π°Π΅ΠΌ градусы ΠΈΠ· ΡƒΠ΄ΠΎΠ±Π½Ρ‹Ρ… Π² Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΈ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ΠΈΠΌ Π² Ρ€Π°Π΄ΠΈΠ°Π½Ρ‹ for (var j = 0; j < shape.length; j += 2) { shape[j] -= 90; shape[j] = shape[j] * Math.PI / 180; } // ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ΠΈΠΌ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΈΠ· Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… Π² Π΄Π΅ΠΊΠ°Ρ€Ρ‚ΠΎΠ²Ρ‹ с ΡƒΡ‡Ρ‘Ρ‚ΠΎΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° кисти { var deg, rad; for (var j = 0; j < shape.length; j += 2) { deg = shape[j]; rad = shape[j + 1]; shape[j] = radius / 2 * rad * Math.cos(deg); shape[j + 1] = radius / 2 * rad * Math.sin(deg); } } // Находим ΡΠ°ΠΌΡƒΡŽ ΠΎΡ‚Π΄Π°Π»Ρ‘Π½Π½ΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ с ΠΊΠ°ΠΆΠ΄ΠΎΠΉ стороны var point1 = [0, 0]; // l, j var point2 = [0, 0]; var x, y, l; var k = (my - ly) / (mx - lx); for (var j = 0; j < shape.length; j += 2) // ΠŸΠ΅Ρ€Π΅Π±ΠΈΡ€Π°Π΅ΠΌ всС Ρ‚ΠΎΡ‡ΠΊΠΈ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Ρ„ΠΎΡ€ΠΌΡ‹ { x = shape[j]; y = shape[j + 1]; // Находим расстояниС ΠΎΡ‚ Ρ‚ΠΎΡ‡ΠΊΠΈ Π΄ΠΎ прямой if (lx == mx) // Если прямая Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π° { l = Math.abs(x); if (x < 0 && l > point1[0]) { point1[0] = l; // РасстояниС Π΄ΠΎ прямой point1[1] = j; // НомСр Ρ‚ΠΎΡ‡ΠΊΠΈ } if (x > 0 && l > point2[0]) { point2[0] = l; point2[1] = j; } } else { l = Math.abs(k*x - y) / Math.sqrt(k**2 + 1); if (y < 0 && l > point1[0]) { point1[0] = l; point1[1] = j; } if (y > 0 && l > point2[0]) { point2[0] = l; point2[1] = j; } } } // ΠžΡΡ‚Π°Π²Π»ΡΠ΅ΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½ΠΎΠΌΠ΅Ρ€Π° Ρ‚ΠΎΡ‡Π΅ΠΊ point1 = point1[1]; point2 = point2[1]; // Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ, с ΠΊΠ°ΠΊΠΎΠΉ Π½Π°Ρ‡Π°Ρ‚ΡŒ if (lx < mx || lx == mx && ly > my) // Если линия Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π° Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ Π²Π½ΠΈΠ· { // МСняСм Ρ‚ΠΎΡ‡ΠΊΠΈ мСстами point1 = point1 + point2; point2 = point1 - point2; point1 = point1 - point2; } // ΠŸΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ линию ΠΏΠΎ Ρ„ΠΎΡ€ΠΌΠ΅ context.beginPath(); context.moveTo(mx + shape[point1], my + shape[point1 + 1]); context.lineTo(lx + shape[point1], ly + shape[point1 + 1]); var j = (point1 + 2) % shape.length; x = lx; y = ly; while (true) { context.lineTo(x + shape[j], y + shape[j + 1]); if (j == point2) { x = mx; y = my; context.lineTo(x + shape[j], y + shape[j + 1]); } j += 2; if (j >= shape.length) j = j % shape.length; if (j == point1) break; } context.closePath(); context.fillStyle = gradient; // context.fillStyle = colorGreen; context.fill();
  • You'd better add more code to the question. Maybe there are not exact calculations occur - Alexey Shimansky
  • Checked, everything should be okay - StormWhisper

1 answer 1

It turned out everything is simple. Made rectangles with non-integer coordinates and flattened out the sides. So you can enter non-integer coordinates

So my code is crooked.

  • To supplement your question, we ask you to use the edit option. The β€œPost Reply” button should only be used for comprehensive answers to questions. - From the queue of checks - Mihanik71
  • Question: when I try to draw something based on these (non-integer) coordinates, are these numbers rounded to integers or somehow taken into account? Answer: you can enter non-integer coordinates. - StormWhisper