06.01.2020, 19:34
|
|
Новичок на форуме
|
|
Регистрация: 06.01.2020
Сообщений: 2
|
|
|
Рекурсия в функции draw,Анимация
Нужно дописать код, чтобы двоеточие в часах мигало, а время менялось без перезагрузки страницы.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<canvas id ="ctx"></canvas>
<script>
window.onload = init;
var ctx, canvas;
function init() {
canvas = document.getElementById("ctx");
ctx = canvas.getContext("2d");
setTimeout(draw,500);
}
function draw() {
// Переменые
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
// Ведущий ноль, проверки и условия
if (minutes <= 9){
minutes = "0" + minutes;
}
if (hours <= 9 ) {
hours = "0" + hours;
}
// Рисование
ctx.fillStyle = "Turquoise";
ctx.strokeStyle = "SteelBlue";
ctx.strokeRect(10,10,250,156);
ctx.lineWidth = 5;
ctx.fillRect(10,10,250,150);
// Цифры
ctx.fillStyle = "white"
ctx.font = "5em serif ";
ctx.fillText(hours,25,100);
ctx.fillText(":", 120, 100);
ctx.fillText(minutes,155,100);
}
</script>
</body>
</html>
|
|
06.01.2020, 20:30
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,135
|
|
|
canvas часы
Fillbill,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<canvas id ="ctx"></canvas>
<script>
window.onload = init;
var ctx, canvas;
function init() {
canvas = document.getElementById("ctx");
ctx = canvas.getContext("2d");
setTimeout(draw,500);
}
function draw() {
// Переменые
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
// Ведущий ноль, проверки и условия
let seconds = date.getSeconds();
if (minutes <= 9){
minutes = "0" + minutes;
}
if (hours <= 9 ) {
hours = "0" + hours;
}
// Рисование
ctx.fillStyle = "Turquoise";
ctx.strokeStyle = "SteelBlue";
ctx.lineWidth = 5;
ctx.strokeRect(10,10,250,130);
ctx.fillRect(13,13,244,124);
// Цифры
ctx.fillStyle = "white"
ctx.font = "5em serif ";
ctx.fillText(hours,30,100);
ctx.fillText(seconds % 2 ? ":" : " ", 125, 93);
ctx.fillText(minutes,160,100);
setTimeout(draw,500);
}
</script>
</body>
</html>
|
|
06.01.2020, 21:15
|
|
Новичок на форуме
|
|
Регистрация: 06.01.2020
Сообщений: 2
|
|
|
Cпасибо большое!
А можно ли как-то сделать это с помощью очистки холста?
( сtx.clearRect(), ctx.save() и ctx.restore() )
|
|
06.01.2020, 22:49
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,135
|
|
|
Сообщение от Fillbill
|
|
А можно ли как-то сделать это с помощью очистки холста?
|
не знаю. |
|
06.01.2020, 23:07
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,135
|
|
Fillbill,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<canvas id ="ctx"></canvas>
<script>
window.onload = init;
var ctx, canvas;
function init() {
canvas = document.getElementById("ctx");
ctx = canvas.getContext("2d");
ctx.fillStyle = "Turquoise";
ctx.strokeStyle = "SteelBlue";
ctx.lineWidth = 5;
ctx.font = "5em serif ";
ctx.save();
draw();
}
function draw() {
// Переменые
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
// Ведущий ноль, проверки и условия
let seconds = date.getSeconds();
if (minutes <= 9){
minutes = "0" + minutes;
}
if (hours <= 9 ) {
hours = "0" + hours;
}
// Рисование
ctx.restore();
ctx.strokeRect(10,10,250,130);
ctx.fillRect(13,13,244,124);
ctx.save();
ctx.fillStyle = "white";
ctx.fillText(hours,30,100);
ctx.fillText(seconds % 2 ? ":" : " ", 125, 93);
ctx.fillText(minutes,160,100);
setTimeout(draw,500);
}
</script>
</body>
</html>
|
|
|
|
