Чтобы поиграть с холстом HTML5, я решил сделать приложение, которое рисует аналоговую синхронизацию. Все отлично, за исключением того, что старые строки не стираются так, как я ожидал. Я включил часть кода ниже - DrawHands() вызывается один раз в секунду:
var hoursPoint = new Object();
var minutesPoint = new Object();
var secondsPoint = new Object();
function drawHands()
{
var now = new Date();
drawLine(centerX, centerY, secondsPoint.X, secondsPoint.Y, "white", 1);
var seconds = now.getSeconds();
secondsPoint = getOtherEndOfLine(centerX, centerY, 2 * Math.PI / 60 * seconds, 0.75 * radius);
drawLine(centerX, centerY, secondsPoint.X, secondsPoint.Y, "black", 1);
drawLine(centerX, centerY, minutesPoint.X, minutesPoint.Y, "white", 3);
var minutes = now.getMinutes();
minutesPoint = getOtherEndOfLine(centerX, centerY, 2 * Math.PI / 60 * minutes, 0.75 * radius);
drawLine(centerX, centerY, minutesPoint.X, minutesPoint.Y, "black", 3);
drawLine(centerX, centerY, hoursPoint.X, hoursPoint.Y, "white", 3);
var hours = now.getHours();
if (hours >= 12) { hours -= 12; } // Hours are 0-11
hoursPoint = getOtherEndOfLine(centerX, centerY, (2 * Math.PI / 12 * hours) + (2 * Math.PI / 12 / 60 * minutes), 0.6 * radius);
drawLine(centerX, centerY, hoursPoint.X, hoursPoint.Y, "black", 3);
}
Чтобы понять это, есть две вспомогательные функции:
- drawLine (x1, y1, x2, y2, цвет, толщина)
- getOtherEndOfLine (x, y, угол, длина)
Проблема в том, что, хотя все руки нарисованы, как ожидалось, в черном, они никогда не стираются. Я ожидал бы, что, поскольку одна и та же линия рисуется белым цветом (фоновым цветом), она эффективно стирает то, что было ранее нарисовано в этой точке. Но, похоже, это не так.
Что-нибудь мне не хватает?