Форум программистов
 
Расширенный поиск
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

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

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

Excel VBA, CAD, Софт, ОС, Windows, Ubuntu, Android, VPS
Win Api, Assembler, C++, Java, Pascal, Lazarus, Delphi, OpenGL, DirectX
C#, Qt, .NET, ASP.NET, Windows Forms, ADO.NET, Framework, WPF, UWP, WinRT, XAML
HTML, CSS, JavaScript, Ajax, PHP, Perl, Python, Ruby, SQL, WordPress, API, XML, JSON, ActionScript, Flash

Ответ
 
Опции темы
Внимание! Есть замечания модератора по теме: Только примеры, созданные участниками форума!
Старый 03.10.2013, 20:46   #1
Arigato
СуперПрограммист
СуперМодератор
 
Аватар для Arigato
 
Регистрация: 27.07.2008
Адрес: Россия
Сообщений: 13,901
Репутация: 3525
Лампочка Работа с 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 Кб, 31 просмотров)
__________________
E-Mail: arigato.freelance@gmail.com

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

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

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 Кб, 45 просмотров)
__________________
E-Mail: arigato.freelance@gmail.com
Arigato вне форума   Ответить с цитированием
Старый 06.10.2013, 22:19   #3
Arigato
СуперПрограммист
СуперМодератор
 
Аватар для Arigato
 
Регистрация: 27.07.2008
Адрес: Россия
Сообщений: 13,901
Репутация: 3525
По умолчанию

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

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 Кб, 64 просмотров)
__________________
E-Mail: arigato.freelance@gmail.com
Arigato вне форума   Ответить с цитированием
Старый 07.10.2013, 09:45   #4
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,499
Репутация: 1785
По умолчанию

Код:

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

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

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

Цитата:
Сообщение от 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...

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

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

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

https://jsfiddle.net/8Observer8/neg21je6/
Изображения
Тип файла: png Axes of coordinates and a few points.png (1.5 Кб, 21 просмотров)
Вложения
Тип файла: rar Axes of coordinates and a few points.rar (14.2 Кб, 1 просмотров)
__________________
Специализируюсь на 3D/2D графике. C++/OpenGL/WinAPI, C#/OpenTK/WinForms/WPF, Unity, TS/JS/WebGL/PixiJS/Phaser/BabylonJS/ThreeJS
8Observer8 вне форума   Ответить с цитированием
Ответ



Опции темы

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

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




04:57.


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

Покупайте на сайте www.skinon.ru уникальные чехлы и наклейки для телефонов.
купить трафик


как улучшить посещаемость, а также решения по монетизации сайтов, видео и приложений

RusProfile.ru


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