Lösungen ,canvas uhr mit border als zeit anzeige

canvas_uhr-mit-border-als-zeit-anzeige.php

Quell Code

<!DOCTYPE HTML>
 <html>
 <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
body{
  margin: 0;
  padding: 0;
  background: #333;
}

canvas{
  position: absolute;
  top: -webkit-calc(50% - 250px);
  top: calc(50% - 250px);
  left: -webkit-calc(50% - 300px);
  left: calc(50% - 300px);
}

div{
  position: absolute;
  top: 5px;
  left: 5px;
  color: #fff;
  font-size: 40px;
  font-family: Arial;
}

span{
  position: absolute;
  bottom: 5px;
  left: 5px;
  color: #666;
  font-size: 13px;
  font-family: Arial;
}

span a{
  text-decoration: none;
  color: #0579f5;
}
h1{
font-size:23px;
color:white;
}
</style>

 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
 </head>
<body>
<h1>Canvas Uhr</h1>
 <canvas></canvas>
 <script>
 var usr_color = 160; //Change value to change color scheme

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame    || 
    window.oRequestAnimationFrame      || 
    window.msRequestAnimationFrame     ||  
    function( callback ){
    window.setTimeout(callback, 1000 / 60);
  };
})();

var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");

var w = 600, h = 600;
canvas.width = w;
canvas.height = h;

var arcs = [];

function init(){
  console.log("init called");
  reset();
  arcs = [];
  var m = new arc();
  m.class = "month";
  arcs.push(m);
  
  var d = new arc();
  d.class = "date";
  d.r = 135;
  arcs.push(d);
  
  var d = new arc();
  d.class = "day";
  d.r = 170;
  arcs.push(d);
  
  var h = new arc();
  h.class = "hours";
  h.r = 205;
  arcs.push(h);
  
  var m = new arc();
  m.class = "mins";
  m.r = 240;
  arcs.push(m);
  
  var s = new arc();
  s.class = "secs";
  s.r = 275;
  arcs.push(s);
}

function arc(){
  this.class = "month";
  this.r = 100;
  this.rot = 1;
  
  this.draw = function(){
    ctx.beginPath();
    ctx.arc(300,300,this.r,(Math.PI/(2/3)),this.rot,false);
    ctx.lineWidth = 30;
    ctx.strokeStyle = "hsla("+(this.rot*(180/Math.PI)+usr_color)+",60%,50%,1)";
    ctx.stroke();
    
    ctx.save();
    ctx.fillStyle = "#333";
    ctx.translate(300, 300);
    ctx.rotate(this.rot);
    ctx.font="14px Arial Rounded MT Bold";
    if(this.class == "secs"){
      var d = new Date();
      ctx.fillText(d.getSeconds(), 267, -5);
    }
    else if(this.class == "mins"){
      var d = new Date();
      ctx.fillText(d.getMinutes(), 233, -5);
    }
    else if(this.class == "hours"){
      var d = new Date();
      ctx.fillText(d.getHours(), 197, -5);
    }
    else if(this.class == "day"){
      var d = new Date();
      var day = d.getDay();
      if(day == 1){
        var day = "Mon"
      }
      else if(day == 2){
        var day = "Tue"
      }
      else if(day == 3){
        var day = "Wed"
      }
      else if(day == 4){
        var day = "Thu"
      }
      else if(day == 5){
        var day = "Fri"
      }
      else if(day == 6){
        var day = "Sat"
      }
      else if(day == 7){
        var day = "Sun"
      }
      ctx.fillText(day, 158, -5);
    }
    else if(this.class == "date"){
      var d = new Date();
      ctx.fillText(d.getDate(), 127, -5);
    }
    else if(this.class == "month"){
      var d = new Date();
      ctx.fillText(d.getMonth()+1, 97, -5);
    }
    ctx.restore();
  }
}

function reset(){
  ctx.fillStyle = "#333";
  ctx.fillRect(0,0,w,h);
}

function draw(){
  reset();
  ctx.fillStyle = "rgba(255,255,255,0.5)";
  ctx.font = "12px Arial"
  ctx.fillText("seconds", 250, 27);
  ctx.fillText("minutes", 252, 63);
  ctx.fillText("hours", 264, 98);
  ctx.fillText("day", 274, 134);
  ctx.fillText("date", 270, 168);
  ctx.fillText("month", 260, 203);
  
  for(var i=0;i<arcs.length;i++){
    var a = arcs[i];
    var d = new Date();
    if(a.class == "month"){
      var n = d.getMonth()+1;
      a.rot = (n/12)*(Math.PI*2) - (Math.PI/2);
    }
    else if(a.class == "date"){
      var n = d.getDate();
      a.rot = (n/31)*(Math.PI*2) - (Math.PI/2);
    }
    else if(a.class == "day"){
      var n = d.getDay();
      a.rot = (n/7)*(Math.PI*2) - (Math.PI/2);
    }
    else if(a.class == "hours"){
      var n = d.getHours();
      var m = d.getMinutes();
      a.rot = ((n/12)*(Math.PI*2) - (Math.PI/2)) + ((m/3600)*(Math.PI*2));
    }
    else if(a.class == "mins"){
      var n = d.getMinutes();
      var s = d.getSeconds();
      a.rot = ((n/60)*(Math.PI*2) - (Math.PI/2)) + ((s/3600)*(Math.PI*2));
    }
    else if(a.class == "secs"){
      var n = d.getSeconds();
      var m = d.getMilliseconds();
      a.rot = ((n/60)*(Math.PI*2) - (Math.PI/2)) + ((m/60000)*(Math.PI*2));
    }
    a.draw();
  }
}

function animloop() {
  draw();
  requestAnimFrame(animloop); 
}

init();
animloop();
 
 </script>
 </body>
 </html>