Skip to content

First issue solved #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Facundo97Maldonado wants to merge 2 commits into
base: master
Choose a base branch
from
Open

First issue solved #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
555d4e1
First issue solved
Facundo97Maldonado Aug 23, 2017
6c8bdb2
Clock working
Facundo97Maldonado Aug 24, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ body {
height: 300px;
border-radius: 50%;
border: 5px solid #FFF;
position: relative;
position: relative;
}

.aguja {
Expand Down Expand Up @@ -48,4 +48,4 @@ body {
left: 5%;
height: 2px;
transform: translateY(-1px);
}
}
10 changes: 4 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,9 @@
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
<div class="reloj">
<div class="aguja horario"></div>
<div class="aguja minutero"></div>
<div class="aguja segundero"></div>
</div>
<canvas id="canvas" width="300" height="300"
style="background-color:#333">
</canvas>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
</html>
89 changes: 86 additions & 3 deletions js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
const horario = document.querySelector('.horario');

/*const horario = document.querySelector('.horario');
const minutero = document.querySelector('.minutero');
const segundero = document.querySelector('.segundero');

function fijarAgujas() {

const ahora = new Date();

const hora = ahora.getHours();
Expand All @@ -14,8 +16,89 @@ function fijarAgujas() {
minutero.style.transform = `rotate(${gradosMinutos}deg)`;

const segundos = ahora.getSeconds();
const gradosSegundos = 90 + segundos * 6;
const gradosSegundos = ((segundos / 60) * 360) + 90;
segundero.style.transform = `rotate(${gradosSegundos}deg)`;

}

setInterval(fijarAgujas, 1000);*/

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let radio = canvas.height / 2;
ctx.translate(radio, radio);
radio = radio * 0.90
setInterval(dibujaReloj, 1000);

function dibujaReloj() {
dibujaEstructura(ctx, radio);
dibujaNumeros(ctx, radio);
dibujaTiempo(ctx, radio);
}

function dibujaEstructura(ctx, radio) {
let gradianes;
ctx.beginPath();
ctx.arc(0, 0, radio, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
gradianes = ctx.createRadialGradient(0,0,radio*0.9, 0,0,radio*1);
gradianes.addColorStop(0, 'black');
gradianes.addColorStop(0.5, 'white');
gradianes.addColorStop(1, 'black');
ctx.strokeStyle = gradianes;
ctx.lineWidth = radio*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, 4, 0, 2*Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
}

function dibujaNumeros(ctx, radio) {
let angulo;
let numero;
ctx.font = radio*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(numero = 1; numero < 13; numero++){
angulo = numero * Math.PI / 6;
ctx.rotate(angulo);
ctx.translate(0, -radio*0.85);
ctx.rotate(-angulo);
ctx.fillText(numero.toString(), 0, 0);
ctx.rotate(angulo);
ctx.translate(0, radio*0.85);
ctx.rotate(-angulo);
}
}

function dibujaTiempo(ctx, radio){
const ahora = new Date();
let hora = ahora.getHours();
let minutos = ahora.getMinutes();
let segundos = ahora.getSeconds();
//hora
hora=hora%12;
hora=(hora*Math.PI/6)+
(minutos*Math.PI/(6*60))+
(segundos*Math.PI/(360*60));
dibujaAgujas(ctx, hora, radio*0.4, radio*0.04);
//minutos
minutos=(minutos*Math.PI/30)+(segundos*Math.PI/(30*60));
dibujaAgujas(ctx, minutos, radio*0.6, radio*0.04);
// segundos
segundos=(segundos*Math.PI/30);
dibujaAgujas(ctx, segundos, radio*0.75, radio*0.02);
}

setInterval(fijarAgujas, 1000);
function dibujaAgujas(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}