JSFiddle - React, Tailwind, and code Playground

canvas with cos and sin

by hronic

HTML

<canvas id="canvas" width="400" height="400"></canvas>

CSS

canvas{
  border: 1px dashed #ccc;
}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
   //Расчет координат центра и радиуса часов
    var radiusClock = canvas.width/2 - 10;
    var xCenterClock = canvas.width/2;
    var yCenterClock = canvas.height/2;
     var radiusNum = radiusClock - 10; //Радиус расположения рисочек	
	
    //Очистка экрана. 
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0,0,canvas.width,canvas.height);
    
    //Рисуем стрелки
    var lengthSeconds = radiusNum - 70;
    var lengthMinutes = radiusNum - 15;
    var lengthHour = lengthMinutes / 1.5;
    var d = new Date();                //Получаем экземпляр даты
    var t_sec = 6*d.getSeconds();                           //Определяем угол для секунд
    var t_min = 6*(d.getMinutes() + (1/60)*d.getSeconds()); //Определяем угол для минут
    var t_hour = 30*(d.getHours() + (1/60)*d.getMinutes()); //Определяем угол для часов
	
    //Рисуем секунды
  /*  ctx.beginPath();
    ctx.strokeStyle =  "black";
    ctx.moveTo(xCenterClock, yCenterClock);
    ctx.lineTo(xCenterClock + lengthSeconds*Math.cos(Math.PI/2 - t_sec*(Math.PI/180)),
				yCenterClock - lengthSeconds*Math.sin(Math.PI/2 - t_sec*(Math.PI/180)));
    ctx.stroke();
    ctx.closePath();
    */
    
    // график
    var t_sec =7*d.getSeconds();   
    for(var i = 0; i < 360; i+=50){
    ctx.beginPath();
    ctx.strokeStyle =  "black";
    ctx.moveTo(xCenterClock + lengthSeconds*Math.cos(Math.PI/2 - (i-50)*(Math.PI/180)),
				yCenterClock - lengthSeconds*Math.sin(Math.PI/2 - (i-50)*(Math.PI/180)));
     ctx.lineTo(xCenterClock + lengthSeconds*Math.cos(Math.PI/2 - i*(Math.PI/180)),
				yCenterClock - lengthSeconds*Math.sin(Math.PI/2 - i*(Math.PI/180)));
    ctx.stroke();
        ctx.closePath();
    }