Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.
Внимание! Некоторое время письма не доходят до аккаунтов MAIL RU GROUP, не доходят на все почтовые ящики mail.ru, inbox.ru, bk.ru. Пишите им жалобы, чтобы быстрее восстановили получение писем, регистрируйтесь через яндекс почту и gmail, туда письма с активизацией доходят.

Вернуться   Форум программистов > Web > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы
Внимание! Есть замечания модератора по теме: Только примеры, созданные участниками форума!
Старый 03.10.2013, 20:46   #1
Arigato
СуперПрограммист
СуперМодератор
 
Аватар для Arigato
 
Регистрация: 27.07.2008
Адрес: Россия РФ Регистрация: 27.07.2008
Сообщений: 13,623
Репутация: 3609
Лампочка Работа с Canvas HTML5 (примеры)

В этой теме размещаем интересные примеры, демонстрирующие работу с канвой (<canvas>). Здесь только уникальный контент, никаких копипаст со сторонних ресурсов, все примеры созданные лично участниками нашего форума.

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

Код:

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

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

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

Несодержательные сообщения будут периодически чиститься.
Вложения
Тип файла: zip excanvas.zip (7.7 Кб, 40 просмотров)
__________________
E-Mail: arigato.freelance@gmail.com

Последний раз редактировалось Arigato; 07.10.2013 в 13:04.
Arigato вне форума   Ответить с цитированием
Старый 03.10.2013, 20:56   #2
Arigato
СуперПрограммист
СуперМодератор
 
Аватар для Arigato
 
Регистрация: 27.07.2008
Адрес: Россия РФ Регистрация: 27.07.2008
Сообщений: 13,623
Репутация: 3609
По умолчанию

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

digital.png

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

Код скрипта:

Код:

/*

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

Вложения
Тип файла: zip DigitalClock.zip (10.0 Кб, 55 просмотров)
__________________
E-Mail: arigato.freelance@gmail.com
Arigato вне форума   Ответить с цитированием
Старый 06.10.2013, 22:19   #3
Arigato
СуперПрограммист
СуперМодератор
 
Аватар для Arigato
 
Регистрация: 27.07.2008
Адрес: Россия РФ Регистрация: 27.07.2008
Сообщений: 13,623
Репутация: 3609
По умолчанию

Построение графиков функций

chart.jpg

Скрипт позволяет выводить на канву графики произвольных функций.

Код скрипта:

Код:

/*

	Copyright 2013 Arigato Software

	Скрипт построения графиков функций
	
	Взято с http://programmersforum.ru/showthread.php?t=245008

*/

var Chart = {
	
	// Параметры:
	axisColor: 'black', // цвет осей
	axisBackColor: 'white', // цвет фона
	axisXScale: 40, // масштаб по X
	axisYScale: 40, // масштаб по Y
	
}

// Отображение осей координат:
Chart.drawAxis = function(canvas) {
	this.canvas = canvas;
	if ( ! canvas.getContext ) return false;
	var context = canvas.getContext('2d');
	this.context = context;
	
	context.save();
	context.fillStyle = this.axisBackColor;
	context.fillRect(0, 0, canvas.width, canvas.height);
	context.lineWidth = 1;
	context.strokeStyle = this.axisColor;
	
	this.ox = Math.floor(canvas.width / 2) + 0.5;
	this.oy = Math.floor(canvas.height / 2) + 0.5;
	
	// ось OX
	context.save();
	context.translate(0, this.oy);
	context.beginPath();
	context.moveTo(0, 0);
	context.lineTo(canvas.width - 2, 0);
	context.lineTo(canvas.width - 7, 5);
	context.moveTo(canvas.width - 2, 0);
	context.lineTo(canvas.width - 7, -5);
	context.stroke();
	context.restore();

	// ось OY
	context.save();
	context.translate(this.ox, 0)
	context.beginPath();
	context.moveTo(0,  canvas.height);
	context.lineTo(0,  2);
	context.lineTo(5,  7);
	context.moveTo(0,  2);
	context.lineTo(-5, 7);
	context.stroke();
	context.restore();
	
	// подписи к осям
	context.save();
	context.font = 'normal 6pt Courier';
	context.translate(this.ox, this.oy);
	
	// подписи OX
	context.textAlign = 'center';
	var maxX = Math.floor(this.ox / this.axisXScale);
	if ( maxX * this.axisXScale > this.ox - 12 ) maxX--;
	for ( var i = 1; i <= maxX; i++ ) {
		var x = i;
		for ( var j = 0; j < 2; j++ ) {
			var xPos = x * this.axisXScale;
			context.beginPath();
			context.moveTo(xPos, -3);
			context.lineTo(xPos, 3);
			context.stroke();
			context.strokeText(x, xPos, 12);
			x = -x;
		}
	}
	
	// подписи OY
	context.textAlign = 'right';
	context.textBaseline = 'middle';
	var maxY = Math.floor(this.oy / this.axisYScale);
	if ( maxY * this.axisYScale > this.oy - 12 ) maxY--;
	for ( var i = 1; i <= maxY; i++ ) {
		var y = i;
		for ( var j = 0; j < 2; j++ ) {
			var yPos = -y * this.axisYScale;
			context.beginPath();
			context.moveTo(-3, yPos);
			context.lineTo(3,  yPos);
			context.stroke();
			context.strokeText(y, -6, yPos);
			y = -y;
		}
	}
	
	context.font = 'normal 10pt Courier';
	context.strokeText('x', this.ox - 6, 12);
	context.strokeText('y', -12, 6 - this.oy);
	context.restore();

	context.restore();
	return true;
}

// Построить график
Chart.drawChart = function(func, color) {

	// добавляем "Math." перед функциями
	func = func.replace(/([a-z]{2,}).*?/gi, 'Math.$1');
	
	// параметры рисования
	var context = this.context;
	context.save();
	context.lineJoin = 'round';
	context.lineWidth = 2;
	context.strokeStyle = color;
	context.translate(this.ox, this.oy);
	
	// отображение графика
	context.beginPath();
	var moveToFlag = true;
	var x, y, ok;
	for ( var xPos = -this.ox; xPos <= this.ox; xPos++ ) {
		x = xPos / this.axisXScale;
		ok = true;
		try {
			eval('y = ' + func);
		} catch(e) {
			moveToFlag = true;
			ok = false;
		}
		if ( ok ) {
			yPos = -y * this.axisYScale;
			if ( moveToFlag ) {
				context.moveTo(xPos, yPos);
				moveToFlag = false;
			} else context.lineTo(xPos, yPos);
			if ( yPos < -this.oy * 2 || yPos > this.oy * 2 ) moveToFlag = true;
		};		
	}
	context.stroke();
	
	context.restore();
}

Вложения
Тип файла: zip Chart.zip (2.6 Кб, 81 просмотров)
__________________
E-Mail: arigato.freelance@gmail.com
Arigato вне форума   Ответить с цитированием
Старый 07.10.2013, 09:45   #4
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,711
Репутация: 2205
По умолчанию

Код:

// добавляем "Math." перед функциями
func = func.replace(/([a-z]{2,}).*?/gi, 'Math.$1');

ИМХО, лучше передавать колбэк. Тогда реально произвольная функция получится, а не зарезервированные в объекте Math.
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Старый 07.10.2013, 12:31   #5
Arigato
СуперПрограммист
СуперМодератор
 
Аватар для Arigato
 
Регистрация: 27.07.2008
Адрес: Россия РФ Регистрация: 27.07.2008
Сообщений: 13,623
Репутация: 3609
По умолчанию

Вы предлагаете формировать список функций, допустимых к использованию? В принципе, можно, но для простого примера, демонстрирующего работу с canvas это как-то избыточно.
__________________
E-Mail: arigato.freelance@gmail.com
Arigato вне форума   Ответить с цитированием
Старый 07.10.2013, 14:53   #6
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,711
Репутация: 2205
По умолчанию

Цитата:
Сообщение от Arigato Посмотреть сообщение
Вы предлагаете формировать список функций, допустимых к использованию? В принципе, можно, но для простого примера, демонстрирующего работу с canvas это как-то избыточно.
Наоборот, сейчас, как я понял, к функциям просто прибавляется Math...
Мне кажется логичнее было бы использовать библиотечку по типу:
Код:

Chart.drawChart (function( x ){
  return x*x + 2;
});
Chart.drawChart (function( x ){
  return Math.sin(2*x);
});
Chart.drawChart (function( x ){
  return 2*x*x*x - 5*x*x + 3*x -1;
});
// etc...

т.е. рисуем любую необходимую пользовательскую функцию =)
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Старый 07.10.2013, 16:12   #7
Arigato
СуперПрограммист
СуперМодератор
 
Аватар для Arigato
 
Регистрация: 27.07.2008
Адрес: Россия РФ Регистрация: 27.07.2008
Сообщений: 13,623
Репутация: 3609
По умолчанию

Понятно, можно и так. Если кому-то это потребуется, то ведь доработать не сложно
__________________
E-Mail: arigato.freelance@gmail.com
Arigato вне форума   Ответить с цитированием
Старый 05.02.2017, 00:51   #8
8Observer8
Профессионал
 
Регистрация: 02.01.2011
Сообщений: 3,238
Репутация: 915
По умолчанию

Координатные оси и несколько точек на WebGL

https://jsfiddle.net/8Observer8/neg21je6/
Изображения
Тип файла: png Axes of coordinates and a few points.png (1.5 Кб, 101 просмотров)
Вложения
Тип файла: rar Axes of coordinates and a few points.rar (14.2 Кб, 3 просмотров)
8Observer8 вне форума   Ответить с цитированием
Старый 08.10.2017, 16:59   #9
dummy_user
Форумчанин
 
Аватар для dummy_user
 
Регистрация: 02.03.2013
Адрес: Сибирь
Сообщений: 109
Репутация: 27

skype: raw_2_raw
По умолчанию

Для игр подходит движок Phaser().
dummy_user вне форума   Ответить с цитированием
Старый 04.02.2018, 23:25   #10
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,711
Репутация: 2205
По умолчанию

Что-то подумалось, что стоит хвастануться своей работой на канвасе. Однако код я выкладывать не могу из-за всякой юридической хрени. Ну и чтобы заценить это, надо немного потрахаться. Если вдруг читающий не отговорился, то действуй так:
0 зайти на beta.ridero.ru
1 зарегаться
2 создать книгу, при создании стоит закинуть какой-нибудь текстовый файлик (*.txt работает быстрее всех)
2.0 не обязательно, но желательно: когда книга сделалась, зайти на вкладку "текст" и добавить в контент какое-нибудь изображение
3 зайти на вкладку "тираж", немного подождать, там на сервере верстается PDF, а после из нее делается картинка. Как только клиент получает картинку, он отобразит тот канвас, которым я бы хотел похвастаться
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Ответ

Опции темы

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

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Разработать i-frame приложение в социальной сети ВКонтакте, используя html5 тег <canvas>. GReise HTML и CSS 3 06.01.2013 16:09
примеры для звонилок на Embarcadero HTML5 Builder beegl Софт 0 13.10.2012 19:01
работа с Canvas BloodMaX Общие вопросы Delphi 7 21.12.2009 22:49
работа с CANVAS BuT@JL Помощь студентам 6 30.11.2008 23:18


20:29.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru