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

Автор: Андрей Косяк Дата публикации: 02.02.2012

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

пример тяжелой шапки

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

Задача

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

Решение

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

  1. создаем контур необходимой формы;
  2. заливаем нужным рисунком.
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 получают большую картинку.

Заметка

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

По теме