Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.07.2018, 16:46
Новичок на форуме
Отправить личное сообщение для Лоэнрон Посмотреть профиль Найти все сообщения от Лоэнрон
 
Регистрация: 24.07.2018
Сообщений: 8

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:51.
Ответить с цитированием
  #2 (permalink)  
Старый 24.07.2018, 16:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Лоэнрон,
добавьте run
[HTML run][/HTML]
Ответить с цитированием
  #3 (permalink)  
Старый 24.07.2018, 16:54
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Так лучше?
<!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>
Ответить с цитированием
  #4 (permalink)  
Старый 24.07.2018, 16:56
Новичок на форуме
Отправить личное сообщение для Лоэнрон Посмотреть профиль Найти все сообщения от Лоэнрон
 
Регистрация: 24.07.2018
Сообщений: 8

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)
То опять начинаются "Искажения"

Последний раз редактировалось Лоэнрон, 24.07.2018 в 17:04.
Ответить с цитированием
  #5 (permalink)  
Старый 24.07.2018, 17:06
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от Лоэнрон
откуда сие странное явление
Цвета на экране формируются из разноцветных точек. При закрашивании по кругу с определенным шагом плотность задействованных точек падает от центра к периферии - закраска получается неравномерной, тем более неравномерной, чем меньшее количество шагов используется. Как-то так...
<!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>
Ответить с цитированием
  #6 (permalink)  
Старый 24.07.2018, 17:10
Новичок на форуме
Отправить личное сообщение для Лоэнрон Посмотреть профиль Найти все сообщения от Лоэнрон
 
Регистрация: 24.07.2018
Сообщений: 8

Сообщение от 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>


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

Последний раз редактировалось Лоэнрон, 24.07.2018 в 17:13.
Ответить с цитированием
  #7 (permalink)  
Старый 24.07.2018, 17:14
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от Лоэнрон
Но если сделать круг сплошным, этот эффект пропадает.
Не знаю, как у кого - у меня на экране в этом примере по горизонтальным и вертикальным осям видны муаровые кресты и центральная часть несколько светлее(эффект зависит еще и от разрешения экрана - на разных экранах выглядит по-разному.)
Ответить с цитированием
  #8 (permalink)  
Старый 24.07.2018, 17:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Лоэнрон,
<!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>

Последний раз редактировалось рони, 24.07.2018 в 17:23.
Ответить с цитированием
  #9 (permalink)  
Старый 24.07.2018, 17:58
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

рони,
При увеличении окружности в 2 раза снова появляется "мусор".
Помогает двойной удар:
context.strokeStyle = "RGB(255, "+i+", 0)";
    context.fillStyle = "RGB(255, "+i+", 0)";
    context.stroke();
    context.fill();
Ответить с цитированием
  #10 (permalink)  
Старый 24.07.2018, 18:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от 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>

Последний раз редактировалось рони, 24.07.2018 в 18:17.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ошибки и баги на сайте Jeremen Сайт Javascript.ru 79 13.08.2021 12:47
Движение по окружности Canvas Valentinka_1 Элементы интерфейса 2 06.07.2015 00:21
canvas fabric добавление кнопки при выделении darl (X)HTML/CSS 1 10.04.2015 16:16
canvas рисование окружности imedia Элементы интерфейса 2 30.05.2014 17:40
Функция при наведении на Canvas объект max0n Общие вопросы Javascript 0 07.05.2013 17:56