Создание линии между двумя точками. Часы JS с использованием <canvas> - PullRequest
Новая
       9

Создание линии между двумя точками. Часы JS с использованием <canvas>

0 голосов
/ 09 октября 2019

Я рисую часы JS, используя элемент html.

Я дошел до точки, где я могу отобразить две точки, между которыми я хочу, чтобы линия была 

// Get canvas element and turn into 'canvas' object
var canvas = document.getElementById("newYorkClock");

// turn canvas object into 2d drawing object
var ctx = canvas.getContext("2d");

// calculate universal radius
var radius = canvas.height / 2;

// Remap starting coordinates to center of clock element/object
ctx.translate(radius, radius);

//Draws Outline of Clock
function drawClock() {
    //draws outer edge
    ctx.arc(0, 0, radius, 0 , 2 * Math.PI);
    ctx.fillStyle = "white";
    ctx.fill();

    // draws inner circle
    ctx.beginPath();
    ctx.arc(0, 0, radius * 0.05, 0, 2 * Math.PI);
    ctx.fillStyle = 'black';
    ctx.fill();

    for(var num = 1; num < 13; num += 1) {
        var ang = (num - 1) * Math.PI / 6;

        ctx.beginPath();                  //creates first out dot
        ctx.rotate(ang);
        ctx.translate(0, -radius * 0.9);
        ctx.rotate(-ang);
        ctx.fillRect(0, 0, 2, 2); //draws the dot
        ctx.rotate(ang);
        ctx.translate(0, radius * 0.9);
        ctx.rotate(-ang);
        //>*1

        ctx.rotate(ang);                  //creates second inner dot
        ctx.translate(0, -radius * 0.8);
        ctx.rotate(-ang);
        ctx.fillRect(0, 0, 2, 2); //draws the dot
        ctx.rotate(ang);
        ctx.translate(0, radius * 0.8);
        ctx.rotate(-ang);
        //>*2

    }
}

drawClock();

Я пытаюсь выяснить, как получить координаты"точка" в точке '//> * 1' и '//> * 2' и нарисуйте линию между ними.

Я свободно следую учебному пособию по часам w3schools здесь https://www.w3schools.com/graphics/canvas_clock_numbers.asp

и использование их документации на холсте безрезультатно https://www.w3schools.com/tags/ref_canvas.asp

...