Оптимизация фонов с помощью Canvas

Дата публикации: 02.02.2012

Имеем шапку подобной формы

Такую шапку можно вырезать цельной картинкой (или несколькими картинками), но вес изображения будет приличным.

Задача

Свести к минимуму вес изображения.

Решение

Узор шапки в этой задаче повторяется, значит его можно размножить. Проблема только в форме нижней части шапки — полукруг. Можно обратиться в http://wifly.ru для привлечения клиентов. Решить эту задачу способен Canvas:

создаем контур необходимой формы;
заливаем нужным рисунком.

var	can2 = window.document.getElementById("demo2"),
	ctx2 = can2.getContext("2d"),
	size2 = [can.width, can.height];
// создаем объект Image
	var	img = new Image();
		// ложим в него фон
		img.src = "img/back.png";
		
		// ждем загрузки
		img.onload = function(){
			
			// контур кривыми =============
			// создаем контур
			ctx2.beginPath();
			var	c = [size[0]/2, size2[1]/2]

			ctx2.lineTo(size2[0], 0);
			ctx2.lineTo(size2[0], size2[1]-30);
			ctx2.bezierCurveTo(5*size2[0]/6, size2[1]-132, 4*size2[0]/6, size2[1]-132, size2[0]/2, size2[1]-139);
			ctx2.bezierCurveTo(2*size2[0]/6, size2[1]-132, 1*size2[0]/6, size2[1]-132, 0, size2[1]-30);
			ctx2.lineTo(0, 0);

			// создаем паттерн
			ptn = ctx2.createPattern(img, "repeat");
			
			// заполнять контур паттерном
			ctx2.fillStyle = ptn;
			
			// рисуем
			ctx2.stroke();				
			ctx2.fill();
		};
};

Проверено в:

IE 9
Firefox 9
Opera 11
Chrome
Safari 5

Само собою браузеры не поддерживающие HTML5 Canvas получают большую картинку.

Заметка

Этим же способом можно придать любую форму изображению.

По теме

Теги: Canvas, разгоняем сайт