Creando animaciones para el canvas de HTML5 con JavaScript

Extracto de la transcripción automática del vídeo realizada por YouTube.

unfortunately I did use grunt for my slides but my port is leat 1337 so hopefully that makes up for it alright but I will probably use grunt after this okay so my name is Josh Robertson actually first if you want or you should pull up my slides that doesn't

cut off okay there we go these are my slides that is a zero and a capital L I guess I don't have to talk too loud I have some demos that will interact the keyboard and so I highly recommend that you pull up my slides alright let me know if you don't

if you want them ok so my name is Josh Robertson for you locals I interned at a place called Domo for three months during the summers when I wasn't in school I'm an open source enthusiast but unfortunately I haven't contributed much yet but I will

contribute hopefully soon it's been kind of busy with because I freelance off-time and so in school so it's been kind of busy but I want to contribute and that was one of my goals for this year snowflake I just put this on there too that was just my

first canvas experiment I just wanted to get that out there and it's on my github and code pen I just will be using code pen for all my demos because I love code pen and it gives back data and stuff like that and also I got featured on the front page one

day randomly it was just like it was like a math homothetic centers that's the math room and I guess they liked it and I also got tweeted out by Chris quarter which is awesome okay so topics that I'll be covering for you how many you have use canvas

here like pretty well they know it pretty well okay well the beginning I guess how many actually know the API and stuff that's I'm trying to say sorry like okay alright so not that many of you I'll just briefly go over it so that when you see my

demos you won't be too confused my demos aren't that complex and I try to write my code pretty simple for this and we'll talk about basic trigonometry so we can animate stuff like cosine and sine and basic motion so velocity acceleration alright

so first off what is canvas it's a graphic so JavaScript so it's an e html5 canvas is an easy and powerful way to draw graphics using javascript and canvas can also use a thing called context well you use context so you can issue commands through JavaScript

so that you can draw stuff and do whatever you want so one little forewarning I do have lots of demos which i think is a good thing because canvas i think is better to see the demos alright so this is the drawing API these are the main ones that I'll be

using they're the simplest and basics of canvas 2d of course there's of course like WebGL and stuff but stroke style will just change the color I just want to go through them briefly joke style will change the color of a line so so if you have a rectangle

or something it'll fill in the color they're all pretty basic line width is the width of a line begin path so if you have you usually always begin with the begin path that's just the proper way to do it and if you're when you're drawing

something so if you're going to draw a line you begin a path and then you say move to which is basically if you imagine it like a drawing thing like I said move to will just pick up your pencil and put it somewhere otherwise if you're using line 2

then it'll just draw all the way across and you give it an x and y so coordinates in the canvas system or the canvas and a stroke you always just stroke it which is basically just draw at the end arc will draw I give you a circle so remember it's XY

radius the start angles usually zero because that's just where you want to start and then the end angle so this could give you a circle oval and then clear rekt will clear your canvas so just stop it and fill rect will draw like a rectangle with the XY

width and height so those are pretty basic and then save and restore I don't use it much in my demos because I just use objects and just store everything in that but if you have just a huge block of lines and stuff then you want to save and restore it

and if you have multiple colors I guess then you want to save it and restore it it's basically just putting it away and then you can restore it later so you have just save multiple colors so these are pretty basics and then just tapping into the API this

is how you you can all see that right okay if you don't you have my hopefully my slides pulled up so tapping into the API you save our canvas is usually the most normal part and then you say dr. Malak doc get element by ID if you in the HTML you'll

see in my demos that you give it a ID if you want or you can query select it but you can just say IDs the example and then you give it the context so canvas is the variable name and then you get contacts 2d so clear clear rect is the one that these are all

just same simple like I said but it's basically just clears and draws it clears and draws it clears and draws it like stop-motion because you don't want pixels left over unless you do want pixels left over which you'll see in my first sign demo

[ ... ]

Nota: se han omitido las otras 2.524 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.