Работа с изображением в html5 canvas

Сегодня разберём функции для работы с графикой используя всё тот же Canvas.

За отображение изображений в Canvas служит функция image().

Сначала я продемонстрирую вам исходный код в котором включены уже все нужные нам функции.

<html>
<head>
<title>Работа с изображением в html5 canvas</title>
<script type="text/javascript">
var canvas, ctx, w, h;
var img;

function init() {
canvas = document.getElementById("canvas");
w = canvas.width;
h = canvas.height;
ctx = canvas.getContext("2d");
ctx.clearRect(0,0,w,h);
ctx.strokeRect(0,0,w,h);
image(); //Отображение изображений в Canvas
}

function image() {
img = new Image();
img.src = "image.png";

	img.onload = function() {
		drawImg ();
	}
}

function drawImg () {
var sx = 0.5;
var sy = 0.5;
var dx =  110;
var dy =  60;
var omega = Math.PI/12;

ctx.save();
ctx.rotate(omega); //Поворот
ctx.translate(dx, dy); //Перемещение
ctx.scale(sx, sy); //Уменьшение
ctx.drawImage(img, 190, 90);
ctx.restore();
}
</script>
</head>
<body onLoad="init()">
<canvas id="canvas" width="500" height="500">
</canvas>
</body>
</html>

Теперь начнём разбирать всё что тут написано, для начала хотел бы обратить внимание на предопределённую в html5 и javascript функцию Image(), которую мы помещаем в переменную img, после чего задаём путь к нашему изображению (19-20 строки).

Далее, после полной загрузки изображения мы создаём функцию drawImg, с которой и будем работать.


function drawImg () {
var sx = 0.5;
var sy = 0.5;
var dx =  110;
var dy =  60;
var omega = Math.PI/12;

ctx.save();
ctx.rotate(omega); //Поворот
ctx.translate(dx, dy); //Перемещение
ctx.scale(sx, sy); //Уменьшение
ctx.drawImage(img, 190, 90);
ctx.restore();
}

По очереди разберём все манипуляции над изображением которые мы сделали.

Поворот изображения - ctx.rotate(omega);, где omega = Math.PI/12, данная функция поворачивает изображение во круг своей оси в зависимости от выставленного значения.

Перемещение точки начала отображения - ctx.translate(dx, dy);, задаёт новую точку старта отображения изображения.

Уменьшение - ctx.scale(sx, sy);, этим самым мы уменьшили нашу картинку на 0.5 с обоих сторон.

Все манипуляции как вы могли заметить, находятся внутри спец. функций ctx.save() и ctx.restore(), первая из них сохраняет исходное изображение, а вторая сбрасывает все действия которые мы применили, после чего если начать изменять изображение после данной функции - оно будет в обычном формате без всяческих изменений.

Архив с 3 примерами для просмотра на своём компьютере - скачать.

Поделитесь ссылкой если мы вам помогли!

Читайте также:

Анимированный задний фон для сайта с помощью Canvas и Html5

Конвертируем видео в формат .ogv для воспроизведения через html5 плеер

Узнаём значение post_max_size с помощью функции ini_get

Программа для удаления ненужных файлов с компьютера

Как обновить компьютер

Добавить комментарий:

Минимум 100 символов.
Модераторы detected!

Вы ввели сообщение длиной символов

Три + Пять ? =