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.
|
|
24.07.2018, 16:49
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
Лоэнрон,
добавьте run
[HTML run][/HTML]
|
|
24.07.2018, 16:54
|
|
Профессор
|
|
Регистрация: 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>
|
|
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.
|
|
24.07.2018, 17:06
|
|
Профессор
|
|
Регистрация: 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>
|
|
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.
|
|
24.07.2018, 17:14
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
Сообщение от Лоэнрон
|
|
Но если сделать круг сплошным, этот эффект пропадает.
|
Не знаю, как у кого - у меня на экране в этом примере по горизонтальным и вертикальным осям видны муаровые кресты и центральная часть несколько светлее(эффект зависит еще и от разрешения экрана - на разных экранах выглядит по-разному.) |
|
24.07.2018, 17:20
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
Лоэнрон,
<!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.
|
|
24.07.2018, 17:58
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
рони,
При увеличении окружности в 2 раза снова появляется "мусор".
Помогает двойной удар:
context.strokeStyle = "RGB(255, "+i+", 0)";
context.fillStyle = "RGB(255, "+i+", 0)";
context.stroke();
context.fill();
|
|
24.07.2018, 18:11
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
|
Сообщение от 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.
|
|
|
|
