Секундная стрелка HTML+JS
15-07-2018
Пример простенького скрипта, который выводит на экран круг и секундную стрелку. Все реализовано на классичском HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Analog Clock</title>
</head>
<body>
<canvas id="clock" ></canvas>
</body>
</html>
И не много магии с использованием Canvas в JS:
const canv = document.getElementById('clock');
const ctx = canv.getContext('2d');
ctx.canvas.width = 300;
ctx.canvas.height = 300;
ctx.translate(150, 150);
setInterval(() => {
const time = new Date();
const sec = time.getSeconds();
ctx.clearRect(-150, -150, ctx.canvas.width, ctx.canvas.height);
ctx.fillStyle = '#29292b';
ctx.fillRect(-150, -150, ctx.canvas.width, ctx.canvas.height);
ctx.strokeStyle = '#ffd007';
ctx.lineWidth = 6;
ctx.beginPath();
ctx.arc(0, 0, 100, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = 2;
ctx.moveTo(0, 0);
ctx.rotate(sec * Math.PI / 30);
ctx.lineTo(0, -85);
ctx.stroke();
ctx.rotate(-sec * Math.PI / 30);
}, 1000);
Как результат, тикающие часики:
ТЕГи: html JavaScript
Помогло? Поделись с друзьями
а в замен я покажу анекдот ;)
