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

[Arigato]

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

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

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

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

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

Несодержательные сообщения будут периодически чиститься.

[Arigato]

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

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

[Arigato]

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

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

[Naive]

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

ИМХО, лучше передавать колбэк. Тогда реально произвольная функция получится, а не зарезервированные в объекте Math.

[Arigato]

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

[Naive]

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

т.е. рисуем любую необходимую пользовательскую функцию =)

[Arigato]

Понятно, можно и так. Если кому-то это потребуется, то ведь доработать не сложно

[8Observer8]

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

https://jsfiddle.net/8Observer8/neg21je6/

[dummy_user]

Для игр подходит движок Phaser().

[Naive]

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