Последние записи

made in programmersforum 7

Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk

Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw

28th
Ноя

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

Posted by maloy under HTML, Исходники

Arigato

HTML5 и элемент <canvas> поддерживается большинством современных браузеров. Для работы скриптов рисования в браузерах IE потребуется подключить дополнительный скриптик в разделе head HTML-странички:

Код:


<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->

Скрипт excanvas.js можно скачать из вложения.

В сообщениях ниже приводится код скриптов, а полные примеры можно качать из вложений.

Цифровые часы

Название: digital.png Просмотров: 38 Размер: 7.7 Кб

Отрисовывает цифровые часы по размерам канвы. Имеется возможность менять некоторые настройки (цвета и прочее).

Код скрипта:

Код:


/*

	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();
	}

};

Вложения