Руководство разработчика по HTML5 Canvas

Трансформации и анимации

Преобразования и анимации возможны с элементом canvas. Вот некоторые из связанных свойств и функций для выполнения преобразований.

• scale (x, y) — изменяет матрицу преобразования, чтобы применить преобразование масштабирования с заданными характеристиками.
• поворот (угол) — изменяет матрицу преобразования для применения преобразования вращения с заданными характеристиками
• translate (x, y) — изменяет матрицу преобразования, чтобы применить преобразование перевода с заданными характеристиками
• transform (m11, m12, m21, m22, dx, dy) — изменяет матрицу преобразования, чтобы применить матрицу, заданную аргументами
• setTransform (m11, m12, m21, m22, dx, dy) — изменяет матрицу преобразования на матрицу, заданную аргументами.

Преобразования и анимации могут работать отдельно, но когда вы объединяете их, как я сейчас продемонстрирую, они могут создавать мощные визуальные утверждения. Начнем с вращения. Чтобы повернуть контекст, передайте угол, и он будет вращаться на холсте. В следующем примере демонстрируется рисование прямоугольника каждые 250 миллисекунд, и каждый прямоугольник поворачивается, поэтому эффект похож на вращающееся колесо. Цвет также рандомизирован для получения блестящего эффекта.

var can = function () {
вар холст;
var context;

возвращение {
draw: function () {
var r = Math.floor (Math.random () * 255) + 70;
var g = Math.floor (Math.random () * 255) + 70;
var b = Math.floor (Math.random () * 255) + 70;
var s = ‘rgba (‘ + r + ‘,’ + g + ‘,’ + b + ‘, 0.5)’;

context.rotate (0,2 * Math.PI);
context.fillStyle = s;
context.fillRect (10, 0, 150, 50);
},
init: function () {
canvas = document.getElementById («myCanvas»);
context = canvas.getContext («2d»);
context.translate (200, 250);
setInterval (can.draw, 250);
}
}
} ();

window.onload = can.init;

На изображении ниже показан результат.

Неподвижное изображение не дает этой демонстрации никакой пользы — чтобы увидеть работающую анимацию, вы можете перейти сюда . Масштабировать элементы холста тоже легко. Я буду придерживаться предыдущей демонстрации, за исключением вращения; Я буду масштабировать каждый прямоугольник каждую секунду. Вот код

var can = function () {
вар холст;
var context;
var x = 0;
var y = 0;

function currectX () {
возврат х = х + 1;
}

function currectY () {
вернуть у = у + 1;
}

возвращение {
draw: function () {
var r = Math.floor (Math.random () * 255) + 70;
var g = Math.floor (Math.random () * 255) + 70;
var b = Math.floor (Math.random () * 255) + 70;
var s = ‘rgba (‘ + r + ‘,’ + g + ‘,’ + b + ‘, 0.5)’;

context.fillStyle = s;
context.scale (1.2,1.2);
context.fillRect (currectX (), currectY (), 5, 5);
},
init: function () {
canvas = document.getElementById («myCanvas»);
context = canvas.getContext («2d»);
context.translate (0, 0);
setInterval (can.draw, 1000);
}
}
} ();

window.onload = can.init;

На изображении ниже показан результат.

Снова изображение не будет отображать анимацию — чтобы увидеть работающую анимацию, вы можете перейти сюда . Как вы можете себе представить, это всего лишь отправная точка для трансформации и анимации. Для сложной анимации вы можете взглянуть на Brilliant Lines, созданную группой W3C. Это можно найти здесь . Для получения дополнительной информации о преобразованиях, вы должны пойти сюда .

Работа с мышью

Как вы уже догадались, работа с мышью также возможна. Как и любой элемент на веб-странице, вы можете вернуть координаты мыши по x и y, запросив свойства элемента pageX и pageY . Чтобы отследить мышь над холстом, вот фрагмент кода.

var canvas = document.getElementById («myCanvas»);
var context = canvas.getContext («2d»);

canvas.onmousemove = function (e) {
var x = e.pageX — this.offsetLeft;
var y = e.pageY — this.offsetTop;

var div = document.getElementById («координаты»);
div.innerHTML = «x:» + x + »y:» + y;
};

В приведенном выше коде я прикрепил событие для захвата движения мыши, поэтому при его перемещении координаты x и y выводятся на веб-страницу. Красиво и просто. Для чего-то более продвинутого, я хотел, чтобы холст действовал как лист бумаги, поэтому он дает вам возможность рисовать на нем. Ну, код для этого не слишком сложен. Вот весь код.

var canvas = document.getElementById («myCanvas»);
var context = canvas.getContext («2d»);

context.fillCircle = function (x, y, radius, fillColor) {
this.fillStyle = fillColor;
this.beginPath ();
this.moveTo (x, y);
this.arc (x, y, радиус, 0, Math.PI * 2, false);
this.fill ();
};

context.clearTo = function (fillColor) {
context.fillStyle = fillColor;
context.fillRect (0, 0, canvas.width, canvas.height);
};

context.clearTo ( «# ддд»);
canvas.onmousemove = function (e) {
if (! canvas.isDrawing) return;
var x = e.pageX — this.offsetLeft;
var y = e.pageY — this.offsetTop;

var div = document.getElementById («координаты»);
div.innerHTML = «x:» + x + »y:» + y;
радиус радиуса = 10;
var fillColor = ‘# ff0000’;
context.fillCircle (x, y, radius, fillColor);
};

canvas.onmousedown = function (e) {
canvas.isDrawing = true;
};
canvas.onmouseup = function (e) {
canvas.isDrawing = false;
};

Благодаря JavaScript я могу легко расширить элемент canvas и добавить несколько пользовательских обработчиков событий для обработки движения мыши. Живая версия этого можно увидеть здесь . Давай, попробуй: набросай что-нибудь.

И в этом прелесть элемента canvas: вы можете попробовать так много всего.

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

Хотите узнать больше? Попробуйте эти ссылки:

• HTML5 Canvas Developer Guide на MSDN
• Аппаратное ускорение Пейнтбол Холст Демо
• Как выбрать между Canvas и SVG для создания веб-графики