Vissza html5

Wekker óra mutatókkal.


Óra megjelenítése canvas rajzvásznon.






Program leírás.

wekker.css fájl tartalma.

body {font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; margin: 0; background-color: #ccc; }
#container {width: 950px; margin-top: 15px; margin-right: auto; margin-left: auto;}
.wekkercanvas{width: 260px; margin-right: auto; margin-left: auto; padding:15px;background-color: white;}

wekker.html fájl tartalma.

<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Wekker óra mutatókkal.</title>
<link href="wekker.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">

<div class="wekkercanvas">
<canvas id="wekker" width="250" height="250" style="border:2px solid lime;"></canvas>
</div>

<script type="text/javascript"  language="javascript" src="wekker.js"></script>


</div>
</body>
</html>

wekker.js fájl tartalma.

// Canvas  Komplett óra megjelenítése:  ------------------------- 

var id = document.getElementById("wekker");
var owek = id.getContext("2d");

var Y=120;            // Perceket alkotó kör top  központja (függőlegesen)
var X=120;            // Perceket alkotó kör left központja (vízszintesen)

var Ysz=110;          // Óra számait alkotó kör központja, top érték.
var Xsz=115;          // Óra számait alkotó kör központja, left érték.


var Mkp= 4;           // Mutatók kezdő pozícióját növelő  érték + 4.
// Következő értékek megadhatók: 0-a vagy nagyobb értékkel. Példa: 3.58
var Pvp=4.14;         // Percmutató végpozícióját növelő  érték + 4.14.
var Ovp=3.3;          // Óramutató  végpozícióját növelő  érték + 3.3.
var MPvp=4;           // Másodpercmutató végpozícióját növelő érték + 4.


// Perceket jelölő pontok. ---------------------------------------------------------------
var pontr=110;        // A kör sugara, melyen a perceket jelölő pontok, elhelyezkednek.
var fok=0;               // Azon fok, mely sin és cos értékét határozza meg.

for (i=0; i < 360;) {
pontMsF=Math.sin(fok * Math.PI / 180); 
pontMcF=Math.cos(fok * Math.PI / 180); 
szlLeft=X+pontr*pontMsF;
szlTop =Y-pontr*pontMcF;

// Számlapon a percek pontjainak megjelenítése.
owek.beginPath();
owek.fillStyle = "rgb(0,0,250)";       // Perceket jelőlő pontok színe
owek.fillRect(szlLeft, szlTop, 3,3);   // Adott perc pozícióban, négyszöget vagy kört határozunk meg.
owek.closePath()

fok=fok+6;                             // fok értékét minden lefutás végén, +6 fokkal növeljük.
i=i+6;
}
// Perceket jelölő pontok, vége. ---------------------------------------------------------


// Óraszámok elhelyezése. -----------------------------------------------------------------
var oraszamok=12;
var szamok=12;
var Krsz=95;           // A kör sugara, melyen a számok elhelyezkednek.
var foksz=0;           // Azon fok, mely a számok sin és cos értékét határozza meg.

// Óra számai és azok pozíciói következnek.
for (i=0; i < 360; ) {
szamMsF=Math.sin(foksz * Math.PI / 180); 
szamMcF=Math.cos(foksz * Math.PI / 180);
szT=Ysz-Krsz*szamMcF; 
szL=Xsz+Krsz*szamMsF;

// Canvas óraszámok kiíratása.
var szamLeft=szL;
var szamTop=szT+16;   // Canvasnál: Top értéket betűmérettel, azaz, +16-al növelni kell, a  számok elhelyezkedéséhez.
owek.beginPath();
owek.fillStyle = "rgb(0,0,0)";
owek.font = "15px Arial";
owek.fillText(szamok,szamLeft,szamTop);
owek.closePath()

foksz=foksz+30;            // fok értékét minden lefutás végén +30 fokkal növeljük (12x30=360)
oraszamok=oraszamok+1;
szamok=oraszamok-12;
i=i+30;
}
// Óraszámok elhelyezésének, vége. ---------------------------------------------------------------


// Mutatók -------------------------------------------------------------------------------------------

var cx = 120;      // Mutató központi pozíciója, left.
var cy = 120;      // Mutató központi pozíciója, top.	
		
//Következő lépés, a mutató pozícionálása, az eltelt másodperceknek megfelelően.
function KomplettWekker() {
var ido = new Date ();
var masodperc = ido.getSeconds();
var mp = -1.57 + Math.PI * masodperc/30;

var perc = ido.getMinutes();
var p = -1.57 + Math.PI * perc/30; 

var ora = ido.getHours();
var o = -1.57 + Math.PI * ora/6 + Math.PI*parseInt(ido.getMinutes())/360;


// -----  Percmutató pozíciói.  ----------------------------------------------------------
pkLeft= cx+Mkp * (Math.cos(p) * 0);       // Percmutató kezdő left pozíciója.
pkTop = cy+Mkp * (Math.sin(p) * 0);       // Percmutató kezdő top pozíciója.

pvLeft= cx+Pvp * (Math.cos(p) * 20);      // Percmutató végének left pozíciója.
pvTop = cy+Pvp * (Math.sin(p) * 20);      // Percmutató végének top pozíciója.
// -----  Percmutató pozíciók vége.  -----------------------------------------------------


// -----  Óramutató pozíciói.  ----------------------------------------------------------
okLeft= cx+Mkp * (Math.cos(o) * 0);       // Óramutató kezdő left pozíciója.
okTop = cy+Mkp * (Math.sin(o) * 0);       // Óramutató kezdő top  pozíciója.

ovLeft= cx+Ovp * (Math.cos(o) * 20);      // Óramutató végének left pozíciója.
ovTop = cy+Ovp * (Math.sin(o) * 20);      // Óramutató végének top  pozíciója.
// -----  Óramutató pozíciók vége.  -----------------------------------------------------


// -----  Másodpercmutató pozíciói.  ----------------------------------------------------------
mpkLeft= cx+Mkp * (Math.cos(mp) * 0);      // Másodpercmutató kezdő left pozíciója.
mpkTop = cy+Mkp * (Math.sin(mp) * 0);      // Másodpercmutató kezdő top pozíciója.

mpvLeft= cx+MPvp * (Math.cos(mp) * 20);    // Másodpercmutató végének left pozíciója.
mpvTop = cy+MPvp * (Math.sin(mp) * 20);    // Másodpercmutató végének top  pozíciója.
// -----  Másodpercmutató pozíciók vége.  -----------------------------------------------------

// Telikört helyezünk el, melynek átmérője egyenlő vagy nagyobb a leghosszabb mutató által bejárt körrel. 
	owek.beginPath();
	owek.arc(cx,cy,83.5,0,2*Math.PI);
		owek.fillStyle = "yellow";
		owek.fill();
	owek.closePath()
// --------------------------------------------------------------------------

// Canvas Óramutató meghatározás: ------------------------------------------------------------------------------
owek.beginPath();
owek.lineWidth=4;                        // Vonal  vastagság.
owek.moveTo(ovLeft, ovTop);      // Vonal, kezdő pozíciója.  left,top.
owek.lineTo(okLeft, okTop);         // Vonal, vég   pozíciója.  left,top.
owek.closePath()
owek.strokeStyle = "blue";            // Vonal színe.
owek.stroke();
// Canvas Óramutató meghatározás vége: ------------------------------------------------------------------------------

// Canvas Percmutató meghatározás: ----------------------------------------------------------------------
owek.beginPath();
owek.lineWidth=4;                          // Vonal  vastagság.
owek.moveTo(pvLeft, pvTop);        // Vonal, kezdő pozíciója.  left,top.
owek.lineTo(pkLeft, pkTop);           // Vonal, vég   pozíciója.  left,top.
owek.closePath()
owek.strokeStyle = "black";              // Vonal színe.
owek.stroke();
	owek.beginPath();
	owek.arc(mpkLeft,mpkTop,8,0,2*Math.PI);
		owek.fillStyle = "black";
		owek.fill();
	owek.closePath()
// Canvas Percmutató meghatározás vége: -----------------------------------------------------------------

// Canvas másodpercmutató meghatároz---------------------------------------------------------------------
owek.beginPath();
owek.lineWidth=2;                              // Vonal  vastagság.
owek.moveTo(mpvLeft, mpvTop);      // Vonal, kezdő pozíciója.  left,top.
owek.lineTo(mpkLeft, mpkTop);         // Vonal, vég   pozíciója.  left,top.
owek.closePath()
owek.strokeStyle = "red";                     // Vonal színe.
owek.stroke();
	owek.beginPath();
	owek.arc(mpkLeft,mpkTop,6,0,2*Math.PI);
		owek.fillStyle = "red";
		owek.fill();
	owek.closePath()
// Canvas másodpercmutató meghatározás vége:-------------------------------------------------------------

setTimeout('KomplettWekker()', 50);

}

window.onload = KomplettWekker;