JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script type="text/javascript">
function clock() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var input = document.getElementById("clock");
input.innerHTML = hours+':'+minutes+':'+seconds;
timeId = setTimeout('clock()', 1000);
}
</script>
</head>
<body onLoad="pusk();">
<canvas id="clock_2" width="500" height="300"></canvas><br/>
<p id="clock"></p><a onClick="stop_1()" href="#">Stop</a> <a onClick="pusk()" href="#">Pusk</a> <a onClick="delta(20)" href="#">Bigger</a> <a onClick="delta(-20)" href="#">Smaller</a>
<script>
var canvas = document.getElementById('clock_2');
var obCanvas = canvas.getContext('2d');
function initContext () {
obCanvas.strokeStyle = 'red';
obCanvas.fillStyle = "#fff";
obCanvas.lineWidth = 1;
}
initContext();
function delta (value) {
canvas.width += value;
canvas.height += value;
preScale(initContext, seconds);
}
function preScale (initFn, drawFn) {
var cx = 125, cy = 75; // Условный центр координат а также половина ширины и высоты
var aspect = Math.min(canvas.width / cx / 2, canvas.height / cy / 2);
initFn();
obCanvas.save();
obCanvas.scale(aspect, aspect);
obCanvas.translate(
(canvas.width / aspect) / 2 - cx,
(canvas.height / aspect) / 2 - cy);
drawFn();
obCanvas.restore();
}
function minutes() {
var now = new Date();
var minutes = now.getMinutes();
obCanvas.moveTo(125, 75);
var x = -Math.round(45*Math.sin(-minutes/9.5))+125;
var y = -Math.round(45*Math.cos(-minutes/9.5))+75;
obCanvas.lineTo(x, y);
obCanvas.stroke();
obCanvas.closePath();
}
function hours()...