[Chris Courses] Drawing On HTML5 Canvas for Complete Beginners

🎯 Загружено автоматически через бота: 🚫 Оригинал видео: 📺 Данное видео принадлежит каналу «Chris Courses» (@ChrisCourses). Оно представлено в нашем сообществе исключительно в информационных, научных, образовательных или культурных целях. Наше сообщество не утверждает никаких прав на данное видео. Пожалуйста, поддержите автора, посетив его оригинальный канал. ✉️ Если у вас есть претензии к авторским правам на данное видео, пожалуйста, свяжитесь с нами по почте support@, и мы немедленно удалим его. 📃 Оригинальное описание: Learn how to use canvas to build your own games at 🚀Download the free HTML5 Canvas cheat sheet at 📸Gear I used to produce this video: In the last episode, we covered skill number one of how to become a canvas pro: Creating and Resizing Your Canvas. We also improved our drawing skills by learning how to draw a very basic rectangle on the screen. The end goal here is to create amazing interactive visuals, but there’s only so much we can create with just rectangles and squares. To get the most out of our canvas pieces, we first need to understand the full extent as to what objects we can draw and how to draw them. To name some, with canvas we can draw: 1. Rectangles - 2. Lines - ! 3. Arcs / Circles - 4. Bezier Curves - 5. Images - 6. Text - For the sake of time, we won’t be covering all of these shapes, but we will learn how to code those that are used the most: rectangles, lines, and arcs. Once we get a grasp on how to draw these three shapes, I’ll show you how to efficiently create hundreds of these shapes at a time using only a couple lines of code. So without further adieu, let’s get to work, and cover skill number two: Drawing Shapes. Video Timeline: ----------------------------- - What can we draw with canvas? - Charizard - Screencast tutorial begins - How to draw lines on the canvas - How to add colors to your shapes and lines - How to create an arc / circle with canvas - Creating multiple shapes with a for loop - Randomizing your objects’ locations Video Resources: -------------------- How to draw various canvas elements: Khan Academy Radians Tutorial: The Platform: ------------------------- is a platform in progress whose goal is to educate aspiring and seasoned web developers via story driven learning. Each course tells a different story, and each milestone reveals a different scene. With an expansive universe to explore, you can track your progress, and gain the necessary skills needed to build your dreams. For updates on the progress of and future videos, join the Chris Courses mailing list at . Chris Courses Social: ------------------------------------- Twitter: Facebook: Christopher Lis Social: --------------------------------------- Twitter: CodePen: Beats: ------------- Joakim Karud - Looking To The Sky w/Peter Kuli & Kasey Andre