Помогите разобраться с canvas! (рисование через циклы).

[drakulawz]

Всем доброго времени суток.
Увидел на хабре как циклом стирали квадраты и получилась шахматная доска. Всё вроди бы понятно, но появились некоторые вопросы, и, возможно, это даже не о канвасе, а скорее об циклах.
Буду очень благодарен если мне помогут разобраться в некоторых вопросах по рисованию разных фигур через циклы.
1. Что означает число 20 в этой и подобных строках:
ctx.clearRect(20 + i * 98.75, 20 + j * 98.75, 98.75, 98.75);
и как узнать какое число нужно ставить?
2. После долгой и мучительной расстановки шашек, методом тыка (подставлял разные вариации и наборы цифр в цикл))), я таки выставил их как надо (более-менее), но всё же: как убрать лишние рядки так как их вышло по четыре у каждой из сторон, а не 3, как надо?
3. Возможно ли как-то вставить moveTo(), что бы не было видно переходов между кругами? Я знаю, что если бы я использовал метод fill() то линий не было бы, но мне не нужно заполнение.

var canv = $('#canv')[0],
        ctx = canv.getContext('2d');
    canv.width = 900;
    canv.height = 900;
    ctx.strokeRect(15, 15, 800, 800);  // внешняя рамка доски;
    ctx.strokeRect(20, 20, 790, 790);  // внутренняя рамка;
    ctx.fillRect(20, 20, 790, 790);       // заливка доски;
    for (var i = 0; i < 8; i += 2)
        for (var j = 0; j < 8; j += 2) {
            // создание размметки шахматной доски;
            ctx.clearRect(20 + i * 98.75, 20 + j * 98.75, 98.75, 98.75);
            ctx.clearRect(20 + (i + 1) * 98.75, 20 + (j + 1) * 98.75, 98.75, 98.75);
        }

    for (var i = 0; i < 16; i += 4) {
        for (var j = 0; j < 6; j += 4) {
            // расстановка синих шашек;
            ctx.beginPath();
            ctx.strokeStyle = 'blue';
            ctx.arc(170 + i * 49.375, 70 + j * 49.375, 35, 0, Math.PI * 2, true);
            ctx.arc(-80 + (i + 3) * 49.375, 20 + (j + 3) * 49.375, 35, 0, Math.PI * 2, true);
            ctx.stroke();
        }
    }
    for (var q = 0; q < 16; q += 4) {
        for (var w = 0; w < 6; w += 4) {
            // расстановка белых шашек;
            ctx.beginPath();
            ctx.strokeStyle = 'white';
            ctx.arc(170 + q * 49.375, 470 + w * 49.375, 35, 0, Math.PI * 2, true);
            ctx.arc(20 + (q + 1) * 49.375, 370 + (w + 4) * 49.375, 35, 0, Math.PI * 2, true);
            ctx.stroke();
        }
    }

Если я правильно всё понял, то здесь нужно использовать по три цикла для каждого ряда шашек каждому из сторон, чтобы не было остаточных линий и было всего три ряда в место 4.
Надеюсь на помощь в разъяснении этих вопросов и подтверждении/опровержении моих домыслов.

Сделал как предполагал:

for (var i = 0; i < 16; i += 4) {
        ctx.beginPath();
        ctx.strokeStyle = 'blue';
        ctx.arc(170 + i * 49.375, 70, 35, 0, Math.PI * 2, true);
        ctx.stroke();
    }
    
    for (var i = 0; i < 16; i += 4) {
        ctx.beginPath();
        ctx.strokeStyle = 'blue';
        ctx.arc(70 + i * 49.375, 170, 35, 0, Math.PI * 2, true);
        ctx.stroke();
    }
    
    for (var i = 0; i < 16; i += 4) {
        ctx.beginPath();
        ctx.strokeStyle = 'blue';
        ctx.arc(170 + i * 49.375, 265, 35, 0, Math.PI * 2, true);
        ctx.stroke();
    }

Но такой код великоват. Проще никак нельзя?

[Dilettante_Pro]

<canvas id = 'canv'></canvas>
<script>
var canv = document.querySelector('#canv'),
        ctx = canv.getContext('2d');
    canv.width = 900;
    canv.height = 900;
    ctx.strokeRect(15, 15, 800, 800);  // внешняя рамка доски;
    ctx.strokeRect(20, 20, 790, 790);  // внутренняя рамка;
    ctx.fillRect(20, 20, 790, 790);       // заливка доски;
    for (var i = 0; i < 8; i += 2)
        for (var j = 0; j < 8; j += 2) {
            // создание размметки шахматной доски;
            ctx.clearRect(20 + i * 98.75, 20 + j * 98.75, 98.75, 98.75);
            ctx.clearRect(20 + (i + 1) * 98.75, 20 + (j + 1) * 98.75, 98.75, 98.75);
        }

for (j = 0; j < 3; j++) {
   for (var i = 0; i < 16; i += 4) {
        ctx.beginPath();
        ctx.fillStyle = 'blue';
        ctx.arc(69.375 + 98.75 * ((j + 1) % 2) + i * 49.375, (69.375 + 98.75 * j), 35, 0, Math.PI * 2, true);
        ctx.fill();
    }
 }   

for (j = 0; j < 3; j++) {
   for (var i = 0; i < 16; i += 4) {
        ctx.beginPath();
        ctx.fillStyle = 'white';
        ctx.arc(69.375 + 98.75 * (j  % 2) + i * 49.375, (563.125 + 98.75* j), 35, 0, Math.PI * 2, true);
        ctx.fill();
    }
 }   
</script>

20 - это отсюда: ctx.strokeRect(20, 20, 790, 790);

69.375 = 20 + 98.75 / 2

ЗЫ: использовал fill, т.к. stroke бледновато выглядит

[drakulawz]

20 - это отсюда: ctx.strokeRect(20, 20, 790, 790);

Ага, понял, т.е. это пиксели зарезервированные под рамки, а я здесь высшую математику искал.

использовал fill, т.к. stroke бледновато выглядит

Да, так проще наверное, а то если делать много циклов для отрисовки stroke получается огромезный код - бред кароче.
Благодарю за пояснение.

как узнать какое число нужно ставить?

Есть ли тут какая-то "премудрость"? Или тупо считать на калькуляторе всякие ранее отрисованные высоты и искать нужные центры...?

[рони]

... шифровка из центра, изменить ww!!!

Пример: canvas шашки

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<canvas id = 'canv'></canvas>
<script>
var canv = document.querySelector('#canv'),
        ctx = canv.getContext('2d');
    var ww = 387, k = 20, kk = k-5 , w = ww - k/2,   v = w/8, vv = v/2,  vd = vv + k, dr = vv-5;
    canv.width = ww + k;
    canv.height = ww + k;
    ctx.strokeRect(kk, kk, ww, ww);  // внешняя рамка доски;
    ctx.strokeRect(k, k, w, w);  // внутренняя рамка;
    ctx.fillRect(k, k, w, w);       // заливка доски;

    for (var i = 0; i < 8; i += 2)
        for (var j = 0; j < 8; j += 2) {
            // создание размметки шахматной доски;
            ctx.clearRect(k + i * v, k + j * v, v, v);
            ctx.clearRect(k + (i + 1) * v, k + (j + 1) * v, v, v);
        }

for (j = 0; j < 8; j++) {
   if(j == 3 || j == 4) continue;
   for (var i = 0; i < 16; i += 4) {
        ctx.beginPath();
        ctx.fillStyle = j > 4 ?'white' : 'blue';
        ctx.arc(vd + v * ((j + 1) % 2) + i * vv, (vd + v * j), dr, 0, Math.PI * 2, true);
        ctx.fill();
    }
 }


</script>


</body>
</html>

[drakulawz]

рони,
мой мозг перестал понимать, что происходит ещё на объявлении переменных.
Точнее, я не могу понять, зачем так усложнять себе жизнь. Так актуально делать в каком-то случаи?

[рони]

Так актуально делать в каком-то случаи?

если нужна доска любого размера, достаточно указать ширину в переменной ww.

[drakulawz]

если нужна доска любого размера, достаточно указать ширину в переменной ww.

понятно, что бы не подбирать и не высчитывать можно просто изменить переменную и всё автоматически поменяется.

[Dilettante_Pro]

Да, так проще наверное, а то если делать много циклов для отрисовки stroke получается огромезный код - бред кароче.

Код для stroke ничем не отличается от кода для fill

<canvas id = 'canv'></canvas>
<script>
var canv = document.querySelector('#canv'),
        ctx = canv.getContext('2d');
    canv.width = 900;
    canv.height = 900;
    ctx.strokeRect(15, 15, 800, 800);  // внешняя рамка доски;
    ctx.strokeRect(20, 20, 790, 790);  // внутренняя рамка;
    ctx.fillRect(20, 20, 790, 790);       // заливка доски;
    for (var i = 0; i < 8; i += 2)
        for (var j = 0; j < 8; j += 2) {
            // создание размметки шахматной доски;
            ctx.clearRect(20 + i * 98.75, 20 + j * 98.75, 98.75, 98.75);
            ctx.clearRect(20 + (i + 1) * 98.75, 20 + (j + 1) * 98.75, 98.75, 98.75);
        }
ctx.lineWidth = 10;
for (j = 0; j < 3; j++) {
   for (var i = 0; i < 16; i += 4) {
        ctx.beginPath();
        ctx.strokeStyle = 'blue';
        ctx.arc(69.375 + 98.75 * ((j + 1) % 2) + i * 49.375, (69.375 + 98.75 * j), 35, 0, Math.PI * 2, true);
        ctx.stroke();
    }
 }   

for (j = 0; j < 3; j++) {
   for (var i = 0; i < 16; i += 4) {
        ctx.beginPath();
        ctx.strokeStyle = 'white';
        ctx.arc(69.375 + 98.75 * (j  % 2) + i * 49.375, (563.125 + 98.75* j), 35, 0, Math.PI * 2, true);
        ctx.stroke();
    }
 }   
</script>

[drakulawz]

Код для stroke ничем не отличается от кода для fill

ага, я уже проверил, только на скрипте рони. Сейчас вот мучаюсь - хочу смочь выделять и передвигать шашки)
Кстати, кто-нибудь знает почему брэкетс может вот так ругаться "Анализатор FS int завершился с ошибкой: [object Object]", вроди бы всё в порядке но в одной функции этот объект не виден, вот кусок кода с объектом и где появляется ошибка:

var lap = [];

var isCursorInArc = function (x, y lap) {
        return x > lap.x && x < lap.x + lap.r && y > lap.y && y < lap.y + lap.ea;
    };

Если закоментировать эту функцию то всё работает.

[j0hnik]

var isCursorInArc = function (x, y, lap)