Автор оригинала: FreeCodeCamp Community Member.
Adam Recvlohe.
Перед emoji, какой-то фон …
Я начал работать в поле веб-разработки около 6 месяцев назад после проведения большей моей карьеры в образовании. Переход был отличным, и я очень благодарен за возможность работать над реальными веб-приложениями.
Я очень счастлив работаю в отрасли, но с моей точки зрения, все еще многое учиться. Поэтому с того дня я начал в качестве разработчика JavaScript, я продолжал проводить время обучения каждый вечер, чтобы повысить свои навыки.
Наряду с изучением, я недавно начал преподавать «вступление в JavaScript Course» к подросткам Tampa Bay (на железном дворе в St.Pete, Florida). Это был отличный опыт по многим причинам. Во-первых, он бросил вам вызов узнать больше о тонкостях и нюансах языка JavaScript.
Во-вторых, я получил шанс снова преподавать, что является одной из моих страстей. И в-третьих, я должен пересмотреть, как я научился программировать, и как это значительно отличается от новичков, которые даже не уверены, если они любят кодировку, и в некоторых случаях не могли меньше заботиться о том, что я должен сказать.
Вы видите, что учебная программа, которую я изначально думал, был бы отличным для этого класса, был JavaScript тремя способами: JS в DOM, JS на сервере и функциональное программирование JS.
После первого дня, и хорошо разговаривая от моих преподавателей, я понял, что я был полностью от базы. Эти темы могут заинтересовать меня, но, безусловно, не развлекайте молодежь, которая просто хочет играть в рекламные игры в браузере. Я полностью переопределял то, что я бы преподаю, и в процессе стал веселиться!
Ниже приведен первый урок, который я подарил студентам, где я начинаю обсуждать функции и в конечном итоге создавать смайлик Emoji. Наслаждаться!
Если вы хотите следовать, как мы говорим о функциях, откройте браузер и перейдите в reft.it А под настроенными языками выберите Nodejs. Reft (чтение оценивает печать печать) должна открываться для вас, и вы можете следить с кодом.
Что такое функции?
Чтобы понять, как мы будем использовать HTML5 Canvas, мы должны немного понимать функции.
«Функции являются автономными модулями кода, которые выполняют определенную задачу. Функции обычно« принять »данные, обработать ее и« возвращать »результат. Как только функция написана, она может быть использована снова и снова.”
Теперь позвольте мне дать вам несколько примеров типов функций, с которыми мы будем иметь дело.
Типы функций
Функция регулярного OLE ‘
Мы объявляем базовую функцию, используя ключевое слово JavaScript Функция Отказ
function sayHelloTo(name) { return 'Hello ' + name;}sayHelloTo('Adam');Эта функция принимает один параметр под названием Имя Отказ Это переменная, которая передается на Сайхеллото функция. Следовательно, когда программа выполняется, она пройдет в том, что предоставляется. В моем случае это Адам Так что в консоли вы увидите Привет Адам Отказ
Конструктор
Мы также можем создать функцию, используя шаблон конструктора.
function Person(name) { this.name = name; this.sayHello = function() { return "Hello, my name is " + this.name; }}var me = new Person("Adam");me.sayHello();Ключевое слово JavaScript это относится к функции. Что это значит, когда мы проходим в переменной, как Имя Точно так же, как мы сделали, мы можем назначить его функции и любой экземпляра этой функции. Чтобы создать экземпляр, мы используем ключевое слово JavaScript Новый Отказ Когда этот новый экземпляр функции создан, он также имеет свои свойства A Это. Немайте Значение и A Это.sayhello метод. Когда мы создали экземпляр метода, который мы передали на наше имя: var человек (‘adam’) Отказ Когда вы смотрите на Сайхелло Метод, он использует это Имя Теперь сейчас является частью этого примера, чтобы создать предложение. Если вы выполняете этот код в nodejs repl reft.it, вы должны увидеть его вывод Здравствуйте, меня зовут Адам Отказ
Теперь, когда мы получили скучно, пускать путь, давайте нарисовать на холсте. То, как я преподавал этот следующий раздел, использовал CodePen.io. Что я предлагаю, если вы хотите следить, перейти к CodePen.io, создайте учетную запись, затем создайте новую ручку, и вы должны быть установлены. Обязательно активируйте свой аккаунт, если вы хотите сохранить свою работу.
Давайте нарисовать на холсте
Во-первых, нам нужно создать холст, чтобы иметь возможность нарисовать его. В вашем HTML создайте тег холста.
Теперь это JavaScript отсюда!
Нам нужно схватить наш элемент холста из дома и объявить его как переменную. Это позволит нам установить свой контекст. Мы не являемся опытными с помощью «3D», поэтому мы будем придерживаться контекста «2D».
var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");Мы также можем дать холст свое ширина и Высота характеристики.
var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;var context = canvas.getContext("2d");Я хочу указать здесь, что холст действует точно так же, как объект. Он имеет свойства и методы, такие как мы видели из нашего функции конструктора выше. Чуть отличается тем, как мы объявили об этом, но функционально он работает очень похожи. Итак, вы видите, что у него есть Высота и ширина Свойства, а также GetContext метод.
Теперь давайте поставим все это в функцию, чтобы вы могли получить несколько знакомых с функциональным программированием.
function draw() { var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d");}Еще ничего не покажет на экране, мы будем использовать FillRect Способ помочь нам с этим.
function draw() { var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); context.fillRect(10,10, 100, 200);}Если вы не догадались, это FillRect Метод принимает четыре параметра: x координата, y координата, ширина и высота. На холсте оси X начинается в 0 слева и до бесконечности идет прямо. Ось Y начинается в 0 сверху и до бесконечности идет вниз. Поэтому, когда мы начнем с (10, 10), мы помещаем воображаемую курсор на точку зрения,) и перейти на 100 справа и 200 до этого.
Как вы, возможно, заметили, он еще не был добавлен на страницу еще. Добавить простой window.Onload Функция и уравновешивать нашу законченную функцию розыгрыша.
function draw() { var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); context.fillRect(10,10, 100, 200);}window.onload = draw;Вам может быть интересно, почему функция розыгрыша была выполнена, даже если мы не выполняли ее с помощью Parens (). Это потому, что window.Onload это функция. Это то же самое, что говоря:
window.onload = function() {// Do stuff here like what we put in draw();}Это означает window.Onload Выполняет функцию, когда окно загружено, так что в конечном итоге происходит window.Onload С его волшебными способностями ставит невидимые разбеживает вокруг розыгрыша, тем самым выполняя его. Много магии вовлечено. Но теперь вы знаете Hocus Pocus.
Давайте добавим немного цвета для удовольствия! Здесь мы используем FillStyle Метод для этого. Это должно прийти до FillRect Или это не покажет.
function draw() { var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); context.fillStyle = "blue"; context.fillRect(10,10, 100, 200);}window.onload = draw;Вот образец этого на кодепене:
Давайте нарисуем некоторые другие формы!
Это было довольно просто. Давайте нарисуем некоторые другие формы сейчас. Как и мы сделали, прежде чем мы создадим функцию и создали наш холст с ширина , Высота и контекст Отказ
function triangle() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = 400; canvas.height = 400;}Так что мы не забываем, изменить oepload Функция, чтобы сделать функцию треугольника сейчас.
window.onload = triangle;
Теперь, когда у нас есть наш холст, давайте начнем рисовать линии на холсте, чтобы создать наш треугольник.
function triangle() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(75, 50);}Здесь мы начинаем наш путь и перемещение курсора в точку,).
Теперь давайте пойдем в город, рисующий некоторые линии.
function triangle() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(75, 50); context.lineTo(100, 75); context.lineTo(100, 25); context.stroke();}Это создало первые две строки, которые нам нужны. Чтобы закончить это, мы вернемся к тому, где мы начали.
function triangle() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(75, 50); context.lineTo(100, 75); context.lineTo(100, 25); context.lineTo(75, 50); // Back to where we started context.stroke();}Чтобы заполнить треугольник, мы можем использовать метод заполнения.
function triangle() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(75, 50); context.lineTo(100, 75); context.lineTo(100, 25); context.lineTo(75, 50); context.stroke(); context.fill();}Вот что это выглядит в дикой природе:
Мы можем сделать то же самое сейчас и легко создавать гигантскую пирамиду.
function pyramid() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = 400; canvas.height = 400;}Не забудьте изменить oepload Функция для пирамиды.
window.onload = pyramid;
Давайте теперь переместим курсор туда, где мы хотим, чтобы это было.
function pyramid() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(200, 0);}Я хочу, чтобы моя пирамида забрала как можно больше места, поэтому я начинаю на самой верхней части моего холста и именно в середине оси X.
Теперь мы можем начать рисовать нашу форму и заполнять ее.
context.lineTo(0, 400);context.lineTo(400, 400);context.lineTo(200, 0);context.stroke();context.fillStyle = "orange";context.fill();
Сделанный! Теперь у вас должен быть приятная оранжевая пирамида на вашем экране, потому что, конечно, вы являетесь частью иллюминатов. Не находитесь!
Вот готовый продукт, с которым вы можете играть с:
Emojis!
Теперь за то, что вы пришли на: Emojis!
Так же, как мы сделали, прежде чем мы создали наш холст.
function smileyFaceEmoji() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = 500; canvas.height = 500;}Не забудьте изменить oepload к этой функции.
window.onload = smileyFaceEmoji;
Теперь давайте нарисовать наше лицо.
context.beginPath();context.arc(250, 250, 100,0,Math.PI*2, true);context.stroke();
Я вроде переключал здесь, используя дуга функция. дуга Функция принимает довольно много аргументов: x координата x, координата y, радиус, отправная точка в радианах, конечная точка в радианах, и ли это нарисовать по часовой стрелке (мы сказали правда). В отличие от того, как прямоугольник сделан начиная с одной точки и движется к следующему, точку) на самом деле является серединой круга, а затем вытягивает 100 пикселей.
Круто, да?! Далее приходит глаза.
context.moveTo(235, 225);context.arc(225, 225, 10, 0, Math.PI*2, true);context.moveTo(285, 225);context.arc(275, 225, 10, 0, Math.PI*2, true);context.stroke();
Тогда рот.
context.moveTo(250, 275);context.arc(250, 275, 50, 0, Math.PI, false); // Why is this last value false? Why did you just use Math.PI?context.moveTo(250, 275);context.lineTo(200, 275);context.stroke();
Вот что выглядит готовый продукт:
Вы сделали это, вы только что сделали смайлик Emoji! GOSH DARN Это я горжусь тобой! Если вы хотите принять свои навыки холста на следующий уровень, попробуйте одну из упражнений ниже.
Упражнения
- Нарисуйте корма emoji.
- Нарисуйте свои инициалы в курсиве.
В итоге
В этом уроке вы узнали о функциях: как создавать функции, выполнять функции и использовать функции для создания небольших программ, которые рисуют линии на холсте. Мы узнали, что функции принимают много форм и могут быть даны свойства и методы. Я надеюсь, что вам понравился этот урок, так как было мое намерение показать вам силу функций, не увядая вас с жаргоном, вместо этого используя визуальные раздражители, чтобы привести их к жизни!
Если вы хотите увидеть весь код для этого урока, перейдите к моему кодепене здесь Отказ