Очень прошу помощи, не могу никак разобраться
Задача в том, что бы сделать часы, которые будут идти.
В них должна быть стрелочка будильника, которую можно двигать.
С часами я вроде разобрался, а вот со стрелкой нет. Пытался сделать одним слоем, но оно не дает сохранять значения, не могу даже сделать, что бы просто при нажатии на определенную точку, стрелка появлялась и оставалась там (из-за постоянной перерисовки, она появляется только на секунду). Попытался сделать два canvas, но стрелка удаляется вместе со всем остальным раз в секунду от clearRect. Появилась идея со вторым слоем, но они не работают, хотя z-index выставил.
Подскажите, что делать, пожалуйста.
<!DOCTYPE html>
<html lang="ru" >
<head>
<meta charset="utf-8" />
<title>Часы</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="clocks">
<canvas id="canvas" width="500" height="500"></canvas>
</div>
<div id="bud">
<canvas id="canvas" width="500" height="500"></canvas>
</div>
<script>
// Внутренние переменные
var canvas, ctx;
var clockRadius = 250;
var clockImage;
// Функции рисования:
function clear() { // Очистка поля рисования
ctx.clearRect(-250, -250, ctx.canvas.width, ctx.canvas.height);
}
function drawScene() { // Основная функция drawScene
clear(); // Очищаем поле рисования
// Получаем текущее время
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
hours = hours > 12 ? hours - 12 : hours;
var hour = hours + minutes / 60;
var minute = minutes + seconds / 60;
// Сохраняем текущий контекст
ctx.save();
// Рисуем изображение часов (как фон)
ctx.drawImage(clockImage, 0, 0, 500, 500);
ctx.beginPath();
// Рисуем цифры
ctx.font = '36px Arial';
ctx.fillStyle = '#000';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
for (var n = 1; n <= 12; n++) {
var theta = (n - 3) * (Math.PI * 2) / 12;
var x = clockRadius * 0.7 * Math.cos(theta);
var y = clockRadius * 0.7 * Math.sin(theta);
ctx.fillText(n, x, y);
}
// Рисуем часовую стрелку
ctx.save();
var theta = (hour - 3) * 2 * Math.PI / 12;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15, -5);
ctx.lineTo(-15, 5);
ctx.lineTo(clockRadius * 0.5, 1);
ctx.lineTo(clockRadius * 0.5, -1);
ctx.fill();
ctx.restore();
// Рисуем минутную стрелку
ctx.save();
var theta = (minute - 15) * 2 * Math.PI / 60;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15, -4);
ctx.lineTo(-15, 4);
ctx.lineTo(clockRadius * 0.8, 1);
ctx.lineTo(clockRadius * 0.8, -1);
ctx.fill();
ctx.restore();
// Рисуем секундную стрелку
ctx.save();
var theta = (seconds - 15) * 2 * Math.PI / 60;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15, -3);
ctx.lineTo(-15, 3);
ctx.lineTo(clockRadius * 0.9, 1);
ctx.lineTo(clockRadius * 0.9, -1);
ctx.fillStyle = 'black';
ctx.fill();
ctx.restore();
ctx.restore();
};
// Инициализация
$(function(){
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
// var width = canvas.width;
// var height = canvas.height;
clockImage = new Image();
clockImage.src = 'images/cface.png';
setInterval(drawScene, 1000); // Циклическое выполнение функции drawScene
});
</script>
<script>
var canv, ctx;
canv = document.getElementById('canvas');
ctx = canv.getContext('2d');
// Рисуем стрелку будильника
canvas.onmousedown = mouseDown;
function mouseDown(evt) {
zx = evt.pageX;
zy = evt.pageY;
var r = Math.sqrt(((zy-271)*(zy-271))+((zx-719)*(zx-719)));
var q = Math.acos((zx-719)/r);
if(zy < 271) {q = -q};
alert(+zx+" "+zy+);
ctx.rotate(q);
ctx.beginPath();
ctx.moveTo(-15, 3);
ctx.lineTo(-15, -3);
ctx.lineTo(clockRadius * 0.65, 3);
ctx.lineTo(clockRadius * 0.65, -3);
ctx.fillStyle = 'red';
ctx.fill();
};
</script>
</body>
</html>
#clocks {
height: 500px;
margin: 25px auto;
position: relative;
width: 500px;
z-index: 1;
}
#bud {
height: 500px;
margin: 25px auto;
position: relative;
width: 500px;
z-index: 7;
}
