JSFiddle - React, Tailwind, and code Playground

by ozzon91

JavaScript

var context; // переменная для хранения контекста
    var container; // переменная для хранения canvas элемента
    var currentAngle = 0; // текущее значение угла
    var radius = 100;  // радиус окружности
    var baseX = 200;   // x координата центра окружности
    var baseY = 200;   // y координата центра окружности

    window.onload = function(){

        container = document.createElement("canvas"); // создаем canvas элемент 
        container.width = 400; // устанваливаем ширину
        container.height = 400; // устанавливаем высоту

        document.body.appendChild(container); // добавляем canvas в DOM

        context = container.getContext('2d'); // получаем конткест
        context.fillStyle = '#000'; // устанавливаем цвет заливки в черный
        context.fillRect(0, 0, container.width, container.height); // собственно заливаем все черным

        setInterval(function(){

            // считаем косинус текущего значения угла
            // и умножаем на значение радиуса
            var vx = Math.cos(Math.PI/180 * currentAngle)*radius;

            // считаем синус текущего значения угла
            // и умножаем на значение радиуса
            var vy = Math.sin(Math.PI/180 * currentAngle)*radius;

            context.fillStyle = 'tan'; // устанавливаем цвет заливки в белый

            // считем новую позицию по x и y относительно центра окружности
            // и заливаем ее квадратиком высотой и шириной в 5 пикселей
            context.fillRect(baseX+vx, baseY+vy, 5, 5);

            // увеличиваем значение угла
            currentAngle+=3;

        }, 200)
    }