Работа с Canvas HTML5 (примеры)

/*

	Copyright 2013 Arigato Software

	Скрипт цифровых часов на Canvas

	Взято с http://programmersforum.ru/showthread.php?t=245008

*/

var DigitalClock = {

	// Параметры часов
	backColor: '#000', // цвет фона
	darkColor: '#010', // цвет выключенного элемента
	lightColor: '#0F0', // цвет включенного элемента
	lineWidth: 24, // толщина линий
	lineLength: 100, // длина линий

	/*
		 -     0
		| |   1 2
		 -     3
		| |   4 5
		 -     6
	*/
	digits: [
		[1,1,1,0,1,1,1], // 0
		[0,0,1,0,0,1,0], // 1
		[1,0,1,1,1,0,1], // 2
		[1,0,1,1,0,1,1], // 3
		[0,1,1,1,0,1,0], // 4
		[1,1,0,1,0,1,1], // 5
		[1,1,0,1,1,1,1], // 6
		[1,0,1,0,0,1,0], // 7
		[1,1,1,1,1,1,1], // 8
		[1,1,1,1,0,1,1]  // 9
	],

	// Запуск часов
	start: function(canvasId) {
		var canvas = document.getElementById(canvasId);
		if ( canvas.getContext ) {
			var context = canvas.getContext('2d');
			this.context = context;
			var xScale = canvas.width / this.offset(18, 4);
			var yScale = canvas.height / this.offset(4, 2);
			context.scale(xScale, yScale);
			this.tick();
			setInterval(function(){DigitalClock.tick()}, 1000);
		}
	},

	// Получить цвет элемента
	getColor: function(bool) {
		return ( bool ) ? this.lightColor : this.darkColor;
	},

	// Рассчитать смещение элемента
	offset: function(countWidth, countLength) {
		return countWidth * this.lineWidth + countLength * this.lineLength;
	},

	// Отображение цифры на канве
	drawDigit: function(x, y, digit) {
		var ctx = this.context;

		ctx.save();
		ctx.translate(x, y);
		ctx.lineWidth = this.lineWidth;
		ctx.lineCap = 'round';

		// рисуем горизонтальные линии
		for (var i = 0; i < 3; i++) {
			var y = i * this.offset(1, 1);
			ctx.beginPath();
			ctx.strokeStyle = this.getColor(this.digits[digit][i*3]);
			ctx.moveTo(this.offset(1, 0), y);
			ctx.lineTo(this.offset(0, 1), y);
			ctx.stroke();
		}

		// рисуем вертикальные линии
		for (var j = 0; j < 2; j++) {
			var y = j * this.offset(1, 1);
			for (var i = 0; i < 2; i++) {
				var x = i * this.offset(1, 1);
				ctx.beginPath();
				ctx.strokeStyle = this.getColor(this.digits[digit][1+j*3+i]);
				ctx.moveTo(x, y + this.offset(1, 0));
				ctx.lineTo(x, y + this.offset(0, 1));
				ctx.stroke();
			}
		}

		ctx.restore();
	},

	// Отображение числа на канве
	drawNumber: function(x, y, number, digits) {
		x += this.offset(4, 1) * (digits - 1);
		for ( ; digits--; ) {
			this.drawDigit(x, y, number % 10);
			number = Math.floor(number / 10);
			x -= this.offset(4, 1);
		}
	},

	// Отрисовка часов
	tick: function() {
		// получаем текущее время
		var now = new Date();
		var hr = now.getHours();
		var mn = now.getMinutes();
		var sc = now.getSeconds();

		// выводим на канву
		this.context.fillStyle = this.backColor;
		this.context.fillRect(0, 0, this.offset(18, 4), this.offset(4, 2));
		this.drawNumber(this.offset(1, 0), this.offset(1, 0), hr, 2);
		this.drawNumber(this.offset(12, 2), this.offset(1, 0), mn, 2);

		// рисуем точки
		this.context.beginPath();
		this.context.arc(this.offset(9, 2), this.offset(1.5, 0.5), this.lineWidth, 0, 2 * Math.PI, true);
		this.context.arc(this.offset(9, 2), this.offset(2.5, 1.5), this.lineWidth, 0, 2 * Math.PI, true);
		this.context.fillStyle = this.getColor(sc % 2);
		this.context.strokeStyle = this.backColor;
		this.context.lineWidth = 1;
		this.context.fill();
		this.context.stroke();
	}

};