Објашњено ХТМЛ платно: Увод у ХТМЛ5 платно и ЈаваСцрипт функције

Пре емоџија, мало позадине ...

Почео сам да радим на пољу веб развоја пре отприлике 6 месеци након што сам већи део каријере провео у образовању. Прелазак је био сјајан и веома сам захвалан на прилици да радим на стварним веб апликацијама.

Веома сам срећан што радим у индустрији, али из моје перспективе још увек има много тога да се научи. Стога, од дана када сам почео да радим као програмер ЈаваСцрипт-а, наставио сам да проводим време сваке вечери проучавајући да бих побољшао своје вештине.

Заједно са студијем, недавно сам почео да предајем „Увод у курс ЈаваСцрипт“ тинејџерима из Тампа Баиа (у Тхе Ирон Иард у Ст.Петеу, Флорида). Ово је било сјајно искуство из многих разлога. Прво, изазвао ме је да сазнам више о замршености и нијансама језика ЈаваСцрипт.

Друго, поново сам добио прилику да предајем, што је једна од мојих страсти. И треће, морам да преиспитам како сам научио да програмирам и како се то драстично разликује од почетника који чак нису сигурни да ли воле кодирање и у неким случајевима не могу да брину мање о томе шта имам да кажем.

Видите, наставни план и програм за који сам првобитно сматрао да би био одличан за ову класу био је ЈаваСцрипт на три начина: ЈС у ДОМ-у, ЈС на серверу и функционално ЈС програмирање.

Након првог дана, и доброг разговора са својим асистентима, схватио сам да сам потпуно изван базе. Ове теме могу да ме занимају, али сигурно не забављају младе људе који само желе да играју спонзориране игре у прегледачу. Потпуно сам преиспитао оно што бих предавао и почео сам да се забављам!

Испод је прва лекција коју сам одржао студентима, где сам започео расправу о функцијама и на крају створио смајли смајлије. Уживати!

Ако желите да наставите док разговарамо о функцијама, отворите прегледач и идите на репл.ит и на популарним језицима одаберите НодеЈС. РЕПЛ (Реад Евалуате Принт Лооп) би требало да вам се отвори и можете следити заједно са кодом.

Шта су функције?

Да бисмо разумели како ћемо користити ХТМЛ5 платно, морамо мало да разумемо функције.

„Функције су самостални модули кода који остварују одређени задатак. Функције обично „узимају“ податке, обрађују их и „враћају“ резултат. Једном када је функција написана, може се користити изнова и изнова. “

Сада ћу вам дати неколико примера типа функција којима ћемо се бавити.

Врсте функција

Регуларна Оле 'функција

Основну функцију декларишемо помоћу функције кључне речи ЈаваСцрипт .

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();

ЈаваСцрипт кључној речи ово се односи на функцију. То значи да када проследимо променљиву попут имена , баш као и раније, можемо је доделити функцији и било којој инстанци те функције. Да бисмо креирали инстанцу користимо ЈаваСцрипт кључну реч нев . Тада је настала ова нова инстанца функције такође има и својих својстава тхис.наме вредности и тхис.саиХелло метода. Када смо креирали инстанцу методе коју смо проследили у своје име: вар ме = нев Персон ('Адам') . Када погледате саиХелло методу, она користи то име, који је сада део те инстанце, за стварање реченице. Ако извршите овај код у НодеЈС РЕПЛ на репл.ит, требало би да га видите на екрану Здраво, моје име је Адам .

Сад кад смо избацили досадне ствари, нацртајмо мало платна. Начин на који сам предавао овај следећи одељак је коришћење цодепен.ио. Оно што предлажем је да ако желите да наставите, идите на цодепен.ио, отворите налог, а затим креирајте нову оловку и требало би да будете постављени. Обавезно активирајте свој рачун ако желите да сачувате свој рад.

Цртајмо на платну

Прво, морамо створити платно да бисмо могли цртати на њему. У свом ХТМЛ-у направите ознаку платна.

Од сада је то ЈаваСцрипт!

Морамо да зграбимо наш елемент платна из ДОМ-а и прогласимо га променљивом. То ће нам омогућити да поставимо његов контекст. Још нисмо толико вешти са „3д“, па ћемо се држати „2д“ контекста.

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”);

Овде желим да нагласим да се платно понаша потпуно попут предмета. Има својства и методе баш као што смо видели из наше горње функције конструктора. Нешто другачији у начину на који смо га пријавили, али функционално делује врло слично. Дакле, видите да има својства висине и ширине, као и методу гетЦонтект .

Сад ставимо све то у функцију тако да се можете донекле упознати са функционалним програмирањем.

function draw() { var canvas = document.getElementById(“canvas”); canvas.width = 800; canvas.height = 800; var context = canvas.getContext(“2d”);}

Још се ништа неће приказати на екрану, користићемо методу филлРецт који ће нам у томе помоћи.

function draw() { var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); context.fillRect(10,10, 100, 200);}

Ако нисте погодили, метода филлРецт узима четири параметра: к координата, и координата, ширина и висина. На платну, оса к почиње на 0 лево и до бесконачности идући десно. Оса и почиње на 0 од врха и до бесконачности надоле. Дакле, када започнемо са (10, 10), постављамо замишљени курсор на тачку (к = 10, и = 10) и идемо 100 десно и 200 доле од те тачке.

Као што сте можда приметили, још увек није додан на страницу. Додајте једноставну функцију виндов.онлоад и нека буде једнака нашој завршеној функцији цртања.

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;

Можда се питате зашто је извршена функција цртања иако је нисмо извршили са паренс (). То је зато што је виндов.онлоад функција. То је исто као кад кажете:

window.onload = function() {// Do stuff here like what we put in draw();}

That means window.onload executes a function when the window is loaded, so what ends up happening is window.onload with its magical powers puts invisible parens around draw, thus executing it. A lot of magic is involved. But now you know the hocus pocus.

Let’s add some color for fun! Here we use the fillStyle method for that. It needs to come before fillRect or it won’t show.

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;

Here is a sample of that on codepen:

Let’s draw some other shapes!

That was pretty simple. Let’s draw some other shapes now. Just as we did before we will create a function and instantiate our canvas with a width, height, and context.

function triangle() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400;}

So we don’t forget, change the onload function to take the triangle function now.

window.onload = triangle;

Now that we have our canvas, let’s start to draw lines on the canvas to create our 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);}

Here we are starting our path and moving the cursor to point (x = 75, y = 50).

Now let’s go to town drawing some lines.

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();}

This created the first two lines that we needed. To finish it off we go back to where we started.

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();}

To fill in the triangle we can use the fill method.

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();}

Here is what that looks like in the wild:

We can do the same thing now and easily create a giant pyramid.

function pyramid() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400;}

Remember to change the onload function to pyramid.

window.onload = pyramid;

Let’s now move the cursor to where we want it to be.

function pyramid() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(200, 0);}

I want my pyramid to take up as much space as possible, so I am starting out at the very top of my canvas and exactly in the middle of the x-axis.

Now we can begin drawing our shape and filling it in.

context.lineTo(0, 400);context.lineTo(400, 400);context.lineTo(200, 0);context.stroke();context.fillStyle = “orange”;context.fill();

Done! You should now have a nice orange pyramid on your screen because of course you are part the Illuminati. Don’t lie!

Here is the finished product that you can play with:

Emojis!

Now for what you came for: Emojis!

Just as we did before we set up our canvas.

function smileyFaceEmoji() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 500; canvas.height = 500;}

Remember to change onload to this function.

window.onload = smileyFaceEmoji;

Now let’s draw our face.

context.beginPath();context.arc(250, 250, 100,0,Math.PI*2, true);context.stroke();

I kind of switched things up here using the arc function. The arc function takes quite a few arguments: x coordinate, y coordinate, radius, starting point in radians, ending point in radians, and whether it is drawn clockwise (we said true). As opposed to how a rectangle is made starting at one point and moving to the next, the point (x = 250, y = 250) is actually the middle of the circle and then extending out 100 pixels.

Cool huh?! Next comes the eyes.

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();

Then the mouth.

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();

Here is what the finished product looks like:

You did it, you just made a smiley face emoji! Gosh darn it I am proud of you! If you want to take your canvas skills to the next level try out one of the exercises below.

Exercises

  1. Draw a poop emoji.
  2. Draw your initials in cursive.

In summary

У овој лекцији сте научили о функцијама: како креирати функције, извршавати функције и користити функције за изградњу малих програма који цртају линије на платну. Сазнали смо да функције имају много облика и да им се могу дати својства и методе. Надам се да вам се свидела ова лекција, јер ми је била намера да вам покажем моћ функција, а да вас не заваравам жаргоном, уместо да их користим визуелним подстицајима да их оживим!

Ако желите да видите сав код за ову лекцију, идите на мој код овде.