JSFiddle - React, Tailwind, and code Playground

by Олег

HTML

<canvas id="canvas" width="500px"></canvas>






















































<div class="footer">
Помогу в решении любого вопроса js, css, html, svg, canvas, animation, php
Модули, комопненты под joomla, wordpress, opencart, modX, drupal, DLE, prestashop
Шрифты! Любые дополнительные символы к стандартным! Локализация к Вашему языку<br>Аккаунт на тостере <a href="https://toster.ru/user/politon">toster.ru/user/politon</a><br><span>E-mail: oleg@w3schools.ru</span><br><span>Skype: politon81</span>
</div>
<!--Любое решение вопросов
E-mail: oleg@w3schools.ru
js, css, html, svg, canvas, animation, php
Модули, комопненты под joomla, wordpress, opencart, modX, drupal, DLE, prestashop
Шрифты! Любые дополнительные символы к стандартным! Локализация к Вашему языку
E-mail: oleg@w3schools.ru
Skype: politon81
-->

CSS

body{
  background:black;
}









































/*Это не относится к Вашему коду*/
.footer{
  position:fixed;
  bottom:20px;
  right:20px;
  font-size:0.7em;
  background:#ff0;
}
.footer span{
  color:#f00;
  font-weight:bold;
}

JavaScript

var canvas = document.getElementById('canvas');
 var timeC=["365","12","55","01"];
 var colorT = ["blue","green","orange","red"];
 var nameDate = ["DAYS","HOUS","MINS","SECS"]
 var ctx = canvas.getContext('2d');
 var numberOfSides = 6,
    size = 50,
    Xcenter = 50,
    Ycenter = 50,
    fSize = 30;
 for(var j=0;j<4;j++){
ctx.beginPath();
ctx.moveTo (Xcenter +  size * Math.cos(0), Ycenter +  size *  Math.sin(0));          
 
for (var i = 1; i <= numberOfSides;i += 1) {
    ctx.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides));
}
ctx.strokeStyle = "white";
ctx.lineWidth = 1;
ctx.stroke();
ctx.beginPath();
ctx.textAlign = 'center';
ctx.font = fSize+"px Arial";
ctx.fillStyle=colorT[j];
ctx.fillText(timeC[j],Xcenter, Ycenter+fSize-18);

ctx.save();
ctx.translate(Xcenter, Ycenter);
ctx.rotate(-Math.PI / 3);
ctx.font = "16px Arial";
ctx.textAlign = 'center';
ctx.fillText(nameDate[j], 0, 60 );

ctx.restore();
Xcenter=Xcenter+120;
}