Throughout the course of this tutorial, Mark uses the example of an interactive game to show you how to use CanvasJS. You will build this game using EaselJS and Flash components provided in the working files , and along the way learn how to create mouse interactions, debugging, create animation and movement, deal with collisions and much more. By the completion of this training course, you will be familiar with the Canvas tag for HTML5, and using EaselJS to create interactive content for your website. Working files are included to allow you to follow along and use the same files that the author uses throughout the training. Search for anything. Udemy for Business.

Author:Arasho Narisar
Language:English (Spanish)
Published (Last):21 May 2012
PDF File Size:17.4 Mb
ePub File Size:16.33 Mb
Price:Free* [*Free Regsitration Required]

Comment 0. Recently I have been attempting to build casual games. I came across the JavaScript library CreateJS , which provides a suite of modular libraries that work together or independently to enable interactive content via HTML5. The modular libraries are:. To draw a shape on the canvas, first, we will need to create a Stage object. Stage is the root level container for display objects.

We will pass the canvas object, which we created earlier. This canvas object will be used by the Stage object for the rendering of display objects. These classes are included in the minified files of each library and are available on the CreateJS namespace. This can be achieved through the following line of code:. This Shape allows us to display vector graphics on the canvas.

Each shape has a Graphics instance which is the interface to the canvas drawing system. Similarly, the Graphics object provides several functions to create shapes. Take a look at the official documentation to see how to create different shapes. For other geometrical shapes, refer to the code on GitHub. This function will update the coordinates of shapes at the touch point and redraws the canvas.

In my demo , I have added a text above the shapes. This can be done by Text objects of EaselJS. It allows you to change color, alignment, size, font, wrapping, and other settings of Text objects. Refer to the GitHub repository for complete source code and a demo is available here. Thank you for taking the time to read this article. See the original article here. Web Dev Zone. Over a million developers have joined DZone. Let's be friends:. Introduction to CreateJS — Part 1. DZone 's Guide to.

In this article, we introduce the JavaScript library suite known as CreateJS, and show you how to make some basic animations using one of it's component libraries. Free Resource. Like 0. Join the DZone community and get the full member experience. Join For Free. This can be achieved through the following line of code: stage. Shape ; circle. Like This Article? DZone Article. Free DZone Refcard. Opinions expressed by DZone contributors are their own. Web Dev Partner Resources.


Introduction to CreateJS – Part 1


FAA AC 120-42B PDF

EaselJS: Getting Started



HTML5 and CreateJS Tutorial - Learn Interactive Development


Related Articles