Когда я впервые сел за редизайн своего личного сайта, я знал, что хочу включить HTML5 Canvas где-нибудь в макет. Проблема была в том, что я раньше не работал с canvas и должен был начать с нуля. Я испытал боль в изучении каждого аспекта добавления текста, рисования фигур, импорта изображений и т. Д., Прежде чем нашел удивительную основу
Canvas Processing.JS
Содержание этой статьи было первоначально размещено в блоге Joey Cadle Allgaier .
Для тех, кто не совсем понимает, что такое HTML5 Canvas, проверьте
запись W3Schools для элемента, прежде чем читать дальше, но в основном это элемент, определяющий графику.
Основы холста
Добавление элемента холста так же просто, как добавление разметки ниже. Один элемент canvas действует как элемент уровня блока, где все дочерние элементы скрыты без использования JavaScript для рисования текста, объектов, изображений и т. Д.
<canvas id="myCanvas"></canvas>
Обратите внимание, что разметка HTML5 и элемент canvas поддерживаются только современными браузерами, такими как Firefox (1.5+), Safari (1.3+), Chrome, Opera (9+) и Internet Explorer (9+).
Очевидно, что мы не хотим добавлять элементы холста без альтернативного отображения для браузеров, которые не поддерживают рендеринг холста. К счастью, вся графика, отображаемая с помощью canvas, размещена над любой разметкой, содержащейся в элементе. Вот как мы ухудшаем холст, чтобы браузеры, такие как
Internet Explorer 8, знали, что им нужно перестать лениться и перейти на более современный браузер.
Сначала мы добавим ссылку на элемент HTML5 shiv для любого пользователя с браузером, более поздним, чем IE9, в части <head> нашего документа, добавив элемент <canvas> в наш стек распознанной разметки html:
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Теперь давайте обновим наш элемент canvas для таргетинга на не современные браузеры:
<canvas id="myCanvas">
<p>Please upgrade your browser to something newer, like <a href="http://chrome.google.com" target="_blank">Google Chrome</a></p>
</canvas>
Приведенная выше разметка позволяет любому, использующему не современный браузер, вероятно, обновить свой браузер. Вы можете поместить замещающий текст с изображением, если хотите. Например, любой посетитель этого сайта, использующий браузер, который не поддерживает HTML5 Canvas, встречает стандартный логотип JPEG, а не альтернативу canvas.
CSS Styling Canvas
Всегда полезно стилизовать элемент canvas, так как до завершения рисования стиль будет действовать как своего рода стартовый экран. Пока мы это делаем, мы также будем стилизовать дочерний элемент в нашем элементе canvas. Стилизация дочерних элементов внутри вашего холста важна, чтобы в не современных браузерах мы занимали одинаковое количество места.
#myCanvas, #myCanvas p {
width: 460px;
height: 250px;
background-color: #f5f5f5;
color: #555;
text-align: center;
}
В современных браузерах наш элемент canvas теперь отображается точно в том виде, в каком мы его стилизовали, а в нетрадиционных браузерах также отображается похожий стиль, но с примечанием для пользователя обновить свой браузер. Обратите внимание, что CSS, такие как цвет текста и фоновый цвет, полезны только до тех пор, пока наш элемент canvas не будет инициализирован. После инициализации вещи, которые мы рисуем на холсте, не могут быть стилизованы с помощью CSS.
Теперь, когда мы рассмотрели основы, как мы можем рисовать на холсте? Мы могли бы использовать современный javascript для рисования на холсте, но в этой статье мы узнаем, как использовать javascript Framework
Processing.JS для обработки всего нашего рисунка.
Начало работы с Processing.JS
Processing.JS — это порт языка
обработки визуального программирования, разработанный
Бен Фрай и
Кейси Реас предназначены для использования в Интернете. Вы разрабатываете код, используя язык обработки и processing.js преобразует эти действия в элементы canvas. Вы можете
скачать последнюю версию Processing.JS на их сайте:
http://processingjs.org .
Давайте начнем с добавления ссылки на processing.js в раздел <head> нашего документа:
<script src="processing-1.3.6.min.js"></script>
Processing.JS теперь добавляет нам функциональность для ссылки нашего элемента canvas на файл (file-type: .pde), в котором существует весь наш код обработки. Давайте сошлемся на наш код, добавив
атрибут «data-processing-sources» к нашему элементу canvas:
<canvas id="myCanvas" data-processing-sources="myProcessingCode.pde">
<p>Please upgrade your browser to something newer, like <a href="http://chrome.google.com" target="_blank">Google Chrome</a></p>
</canvas>
Теперь все, что нам нужно сделать, это создать исходный файл, на который есть ссылка (в данном случае
«myProcessingCode.pde» ), и добавить наш код обработки.
Написание кода обработки
Мы рассмотрим несколько основных методов рисования, таких как фигуры, текст и изображения, но перед этим я хочу рассказать о двух основных функциях Processing.JS:
настройка и
рисование .
Функция
настройки содержит весь код, который мы хотим запустить при инициализации нашего холста. Самое главное, что здесь вы устанавливаете такие ключевые значения, как размер элемента canvas
и
частота кадров . Давайте продолжим и установим размер, частоту кадров и фон нашего элемента canvas:
void setup() {
size(500, 250);
background(245);
framerate(30);
}
В приведенном выше коде мы говорим Processing.JS установить размер нашего холста равным ширине / высоте 500/250, а фону нашего холста — значение rgb 245, 245, 245 (# F5F5F5) и установить частоту кадров нашего холста (важно для цикла, о котором мы поговорим позже), все при инициализации холста.
Обратите внимание, что все функции обработки обозначены как «void», и в этом случае Processing.js распознает
функцию настройки как функцию, запускаемую при инициализации нашего холста. Добавить пользовательскую функцию просто:
void myFunction() {
// do something here
}
Наша начальная функция установки устанавливает значения для стилей CSS и цвета фона и размера, и наш холст теперь имитирует то, что мы видели до добавления какого-либо кода обработки.
Теперь мы добавим розовый прямоугольник размером 50×50 с белым штрихом в 1 пиксель к случайной позиции нашего холста, изменив нашу функцию настройки .
void setup() {
size(500, 250);
background(245);
framerate(30);
color pink = #ffb5b5;
color white = #ffffff;
fill(pink);
stroke(white);
int positionX = int(floor(random(20, 408))); // 20 pixel left and right padding
int positionY = int(floor(random(20, 158))); // 20 pixel top and bottom padding
rect(positionX, positionY, 50, 50); // x, y, width, height
}
Обращаясь к каждой функции, мы видим, что сначала мы объявляем некоторые цветовые переменные, используя следующий синтаксис:
color myColor = #hexvalue;
Всегда назначайте сложные цвета переменным цвета, чтобы мы могли связать их с такими методами, как заливка , фон и обводка . Вы можете отказаться от использования шестнадцатеричных значений и вместо этого использовать значения rgb, так как color myColor = color (255, 181, 181); ,
Далее мы объявляем нашу заливку, используя метод fill () . Значение цвета, которое мы назначаем этому методу, будет цветом заливки любого метода формы, который мы затем вызываем. Это также относится к нашему методу stroke () . Если вы не вызовете fill () и stroke () до объявления формы, у фигуры будет цвет заливки по умолчанию — белый и штрих по умолчанию — 1 пиксель, черный.
Если вы не хотите заливать или обводить следующую нарисованную фигуру, вы можете сделать это, заменив методы fill () и stroke () методами noFill () и / или noStroke () .
noFill(); // the next shape will not be filled noStroke(); // the next shape will not be stroked
Мы также можем объявить, если мы хотим, чтобы наша фигура была сглаженной или «сглаженной» (без сглаживания, установленного по умолчанию), или изменить вес нашего штриха (по умолчанию вес обводки равен 1px), вызвав методы smooth () и strokeWeight () :
smooth(); // antialias our shape strokeWeight(10); // set the stroke weight to 10 pixels
Теперь мы объявляем переменные positionX и positionY для рандомизации места появления нашего прямоугольника, используя метод данных int , поскольку мы знаем, что наше значение будет целым числом, и мы будем использовать метод random () . Случайный метод может и будет возвращать значение с плавающей запятой, поэтому мы будем использовать метод floor () для округления числа, возвращаемого random (), вниз.
int myInt = int(floor(random(start, end))
Обратите внимание, что в моем примере я знаю, что размер холста составляет 500×250, поэтому для обеспечения того, чтобы мой прямоугольник располагался как минимум на 20 пикселей от границы краев холста, мое начальное значение равно 20, а конечное значение равно 500 (размер холста) минус 40. (Отступ 20 пикселей влево / вправо) минус 52 (ширина / высота прямоугольника, включая обводку в 1 пиксель) для позиции X и 250 (размер холста) минус … для позиции Y. Однако вы можете использовать любое значение, которое считаете нужным, или объявить неслучайное значение, например, так: int positionX = 10;
Осталось только создать нашу форму. Мы решили создать прямоугольник с помощью метода rect () :
rect(x, y, width, height);
Помните, что объявление только обнаженной функции rect () без установки каких-либо fill () и / или stroke () приведет к появлению фигуры, которую вы не сможете увидеть, поэтому не забывайте вызывать эти методы, как указано ранее. Если вы ненавидите прямоугольники, вы можете изменить форму, изменив метод rect () на ellipse () , line () , point () , quad () , arc () или triangle ()
ellipse(x, y, width, height); line(xStart, yStart, xEnd, yEnd); // doesn't auto stroke point(x, y); // doesn't auto stroke quad(x1, y1, x2, y2, x3, y3, x4, y4); // x,y position of each corner of a rectangle arc(x, y, width, height, start[radian], stop[radian]); // PI radians with or without math operators eg: PI, PI/2, TWO_PI-PI, PI+TWO_PI, etc... triangle(x1, y1, x2, y2, x3, y3); // x,y of each point of a triangle
Дополнительные методы 2D-формы (включая кривые) см. В справочном разделе веб-сайта Processing.JS .
Фигуры с помощью SVG
Если вы знакомы с SVG и постоянно работаете с ним, вам нужно знать, что вы можете определять фигуры с помощью файла SVG с помощью PShape Datatype:
PShape mySVG; // set the PShape datatype to the mySVG variable
mySVG = loadShape("mySVGfile.svg"); // load your .svg file using loadShape();
smooth(); // antialias the shape
shape(mySVG, x, y, width, height);
Обратите внимание, что вы всегда должны загружать свой SVG-файл с помощью метода loadShape () перед вызовом метода shape () .
Добавление
обработки текста. JS предоставляет нам тип данных PFont и методы loadFont () , textFont () и text () .
Загрузка шрифтов в canvas может быть немного сложной, поскольку, несмотря на простоту метода loadFont (), поддержка шрифтов для canvas варьируется в разных браузерах. Firefox лучше всего поддерживает холст-шрифты, но имеет заранее определенный список шрифтов. На данный момент лучше использовать обязательно установленный шрифт (например, Arial) или метод PFont_list () для проверки шрифтов, доступных пользователю для загрузки. Для получения дополнительной информации см.Processing.JS ссылка на PFont_list () .
Давайте добавим немного текста на наш холст:
void setup() {
size(500, 250);
background(245);
framerate(30);
color pink = #ffb5b5;
color white = #ffffff;
fill(pink);
stroke(white);
int positionX = int(floor(random(20, 408)));
int positionY = int(floor(random(20, 158)));
rect(positionX, positionY, 50, 50);
fill(64); // color the text #404040 rgb(64, 64, 64)
PFont fontArial = loadFont("arial"); // load the Arial font
textFont(fontArial, 32); // set the font-size of fontArial to 32 point
text("Joey Cadle Rocks!", 110, 60); // Add the text to canvas at x, y position
}
Функция draw () и
обработка загрузки изображения. Функция draw () — это место, где должна выполняться большая часть вашего рисунка . Самое важное, на что следует обратить внимание, это то, что Processing.JS автоматически зацикливает функцию draw () на любой frameRate (), который вы указали в своей настройке (). Из-за этого автоматического зацикливания нам даны методы loop () и noLoop () .
В следующем добавлении к нашему коду мы будем загружать изображения, используя тип данных PImage и методы loadImage () , requestImage () , image () и get () .
Давайте теперь используем функцию draw () для обработки нашего рисунка, и давайте загрузим изображение, используя requestImage (), а не loadImage (), так как loadImage () замораживает canvas, пока изображение не будет загружено, а requestImage () — нет. Вот посмотрите только на код загрузки изображения:
PImage img; // PImage for preloading
PImage part; // PImage for display
img = requestImage("yourImage.png"); // accepted formats are .jpg, .gif, and .png
part = img.get(); // get all pixels from the image
image(part, 20, 20); // display the image at x, y coordinates
Обратите внимание, что теперь мы собираемся инициализировать наши объекты PImage и PFont вне наших функций setup () и draw (), чтобы они были доступны в нашем скрипте.
PImage img;
PImage part;
PFont fontArial = loadFont("arial");
void setup() {
size(500, 250);
background(245);
frameRate(30);
img = requestImage("yourImage.png");
}
void draw() {
background(245);
part = img.get();
image(part, 20, 20);
color pink = #ffb5b5;
color white = #ffffff;
fill(pink);
stroke(white);
int positionX = int(floor(random(20, 430)));
int positionY = int(floor(random(20, 180)));
rect(positionX, positionY, 50, 50);
fill(64);
textFont(fontArial, 32);
text("Joey Cadle Rocks!", 110, 60);
noLoop(); // Tell Processing.JS to stop looping.
}
Теперь мы погружаемся в сердце Processing.JS, используя его две основные функции. Обратите внимание, что большинство методов, включая noLoop () и loop () , доступны в других средах, таких как JQuery . Вы можете делать такие вещи, как:
$('.some_div').click(function() { loop(); }
Указав noLoop () в нашей функции draw (), мы можем использовать циклы. Мы собираемся добавить анимацию и список событий для движения мыши. Мы удалим наш прямоугольник и решим двигать изображение и текст с помощью мыши. Это можно сделать, вызвав функцию mouseMoved () и используя цикл нашей функции draw () .
Наша способность использовать изображение и текст в соответствии с указаниями мыши зависит от того факта, что Processing.JS постоянно сохраняет текущее положение мыши в переменных mouseX и mouseY . Мы добавим 5-кадровую задержку к нашему движению с помощью простой математики.
PImage img;
PImage part;
PFont fontArial = loadFont("arial");
void setup() {
size(500, 250);
background(245);
frameRate(30);
x = 20; // set initial x position
y = 20; // set initial y position
mX = x; // set mouseX to above x
mY = y; // set mouseY to above y
delay = 5; // set the frames we want to delay movement
img = requestImage("yourImage.png");
}
void draw() {
x += (mX - x) / delay; // reset our x with current x position minus mouseX position and delay it
y += (mY - y) / delay; // reset our y with current y position minus mouseY position and delay it
fontX = x + 90; // add the width of our image to ensure its to the right (in the demo case: 90)
fontY = y + 40; // add the height of our image to ensure its level (in the demo case: 40)
background(245);
part = img.get();
image(part, x, y); // draw our image at x, y based on x,y values above.
fill(64);
textFont(fontArial, 32);
text("Joey Cadle Rocks!", fontX, fontY); // Add the text to canvas at fontX and fontY position
}
void mouseMoved() {
mX = mouseX; // set mX to our mouseX position
mY = mouseY; // set mY to our mouseY position
}
Processing.JS имеет другие встроенные прослушиватели событий, такие как mouseClicked () и mouseDragged . Посетите их веб-сайт для получения полного списка слушателей, но, насколько нам известно, наш холст теперь анимирован и интерактивен! Для полной демонстрации проверьте живой пример здесь .
Заключение
Эта статья предназначена для демонстрации упрощенного использования Processing.JS. Ни в коем случае не принимайте эту статью и не используйте ее, чтобы судить об ограничениях Processing.JS или Canvas в целом. Нативный API Canvas является невероятно мощным, как будто Processing.JS, эта статья — лишь пример того, чего вы можете достичь. Спасибо за чтение.
Короткий URL: http://bit.ly/z25Lvg
Источник: http://joeycadle.com/blog/article/1/2012/22/01/html5-canvas-and-processing-js