Javascript-форум - CANVAS. При рисовании окружности из частей, начинается "искажение"

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - CANVAS. При рисовании окружности из частей, начинается "искажение" (https://javascript.ru/forum/dom-window/74616-canvas-pri-risovanii-okruzhnosti-iz-chastejj-nachinaetsya-iskazhenie.html)

Лоэнрон

24.07.2018 16:46

CANVAS. При рисовании окружности из частей, начинается "искажение"

Доброго времени!
При рисовании круга, состоящего из разноцветных "кусков" начинается "искажение" итогового круга.
Вот код:

<!DOCTYPE html>
<html>
<body>
<canvas id="circle"></canvas>
</body>
<script>

var circle = document.getElementById("circle");

circle.width = 256;
circle.height = 256;

var context = circle.getContext('2d');

for(var i = 1; i < 361; i++){
	context.beginPath();
	context.fillStyle = "RGB(255, "+i+", 0)";
	context.arc(128, 128, 128, (i-1)*Math.PI/180, i*Math.PI/180, false);
	context.arc(128, 128, 0, 0, 1, false);
	context.fill();
}

</script>
</html>

Кто знает или, может быть, сталкивался, подскажите, в чем дело?

рони	24.07.2018 16:49

Лоэнрон,
добавьте run

[HTML run][/HTML]

Dilettante_Pro

24.07.2018 16:54

Так лучше?

<!DOCTYPE html>
<html>
<body>
<canvas id="circle"></canvas>
</body>
<script>

var circle = document.getElementById("circle");

circle.width = 256;
circle.height = 256;

var context = circle.getContext('2d');

for(var i = 1; i < 1440; i++){
	context.beginPath();
	context.fillStyle = "RGB(255, "+i/4 +", 0)";
	context.arc(128, 128, 128, (i-1)*Math.PI/720, i*Math.PI/720, false);
	context.arc(128, 128, 0, 0, 1, false);
	context.fill();
}

</script>
</html>

Лоэнрон

24.07.2018 16:56

Dilettante_Pro,
Намного... Однако, а откуда сие странное явление, и почему оно решается увеличением значений? Неужели неточные вычисления?

Только, я полагаю, context.arc(128, 128, 128, (i-4)*Math.PI/720, i*Math.PI/720, false);
Но огромное спасибо!

Самое странное, если поставить в цикле for(var i = 1; i < 1440; i+=4)
То опять начинаются "Искажения"

Dilettante_Pro

24.07.2018 17:06

Цитата:

Сообщение от Лоэнрон

откуда сие странное явление

Цвета на экране формируются из разноцветных точек. При закрашивании по кругу с определенным шагом плотность задействованных точек падает от центра к периферии - закраска получается неравномерной, тем более неравномерной, чем меньшее количество шагов используется. Как-то так...

<!DOCTYPE html>
<html>
<body>
<canvas id="circle"></canvas>
</body>
<script>

var circle = document.getElementById("circle");

circle.width = 256;
circle.height = 256;

var context = circle.getContext('2d');

for(var i = 1; i < 90; i++){
	context.beginPath();
	context.fillStyle = "RGB(255, "+i*4 +", 0)";
	context.arc(128, 128, 128, (i-1)*Math.PI/45, i*Math.PI/45, false);
	context.arc(128, 128, 0, 0, 1, false);
	context.fill();
}

</script>
</html>

Лоэнрон

24.07.2018 17:10

Цитата:

Сообщение от Dilettante_Pro

Но если сделать круг сплошным, этот эффект пропадает.

<!DOCTYPE html>
<html>
<body>
<canvas id="circle"></canvas>
</body>
<script>

var circle = document.getElementById("circle");

circle.width = 256;
circle.height = 256;

var context = circle.getContext('2d');

for(var i = 1; i < 361; i++){
	context.beginPath();
	context.fillStyle = "RGB(255, 0, 0)";
	context.arc(128, 128, 128, (i-1)*Math.PI/180, i*Math.PI/180, false);
	context.arc(128, 128, 0, 0, 1, false);
	context.fill();
}

</script>
</html>

Опа! Не прав. Странно. Если делать сплошным у меня в коде все отображалось нормально.
Все, я понял я не прав. Спасибо за разъяснение.

Dilettante_Pro

24.07.2018 17:14

Цитата:

Сообщение от Лоэнрон

Но если сделать круг сплошным, этот эффект пропадает.

Не знаю, как у кого - у меня на экране в этом примере по горизонтальным и вертикальным осям видны муаровые кресты и центральная часть несколько светлее(эффект зависит еще и от разрешения экрана - на разных экранах выглядит по-разному.)

рони	24.07.2018 17:20

Лоэнрон,

<!DOCTYPE html>
<html>
<body>
<canvas id="circle"></canvas>

<script>

var circle = document.getElementById("circle");

circle.width = 256;
circle.height = 256;

var context = circle.getContext('2d');
    context.lineWidth = 4;
for(var i = 1; i < 360; i++){
    context.beginPath();
    context.arc(128, 128, 124, (i-1)*Math.PI/180,  i*Math.PI/180, false);
    context.arc(128, 128, 0, 0, 1, false);
    context.strokeStyle = "RGB(255, "+i+", 0)";
    context.stroke();
}

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

Dilettante_Pro

24.07.2018 17:58

рони,
При увеличении окружности в 2 раза снова появляется "мусор".
Помогает двойной удар:

context.strokeStyle = "RGB(255, "+i+", 0)";
    context.fillStyle = "RGB(255, "+i+", 0)";
    context.stroke();
    context.fill();

рони	24.07.2018 18:11

Цитата:

Сообщение от Dilettante_Pro

При увеличении окружности в 2 раза

подобрать значение lineWidth и radius - lineWidth

<!DOCTYPE html>
<html>
<body>
<canvas id="circle"></canvas>

<script>

var circle = document.getElementById("circle");

circle.width = 512;
circle.height = 512;

var context = circle.getContext('2d');
    context.lineWidth = 8;
for(var i = 1; i < 360; i++){
    context.beginPath();
    context.arc(256, 256, 248, (i-1)*Math.PI/180.0, (i*Math.PI/180.0), false);
    context.arc(256, 256, 0, 0, 1, false);
    context.strokeStyle = "RGB(255, "+i+", 0)";
    context.stroke();
}

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

Часовой пояс GMT +3, время: 23:24.

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице