| Share this post! | Vote this! |
|
This tutorial will demonstrate how to allow the user to paint on your canvas dynamically – creating very basic paint application.
Getting Started
We’re going to be using the boilerplate.html page found in the download folder that came with this tutorial as a basis for our project. This page contains the necessary markup for an HTML5 page, along with a canvas element predefined within the body. The page is also linked to two JavaScript files.
The first is “Jquery.js”, which can be obtained from Jquery.com, and the second is “paint.js”. We’ll be writing all of our code in the paint.js file, which can also be found in the folder that came with the tutorial. Let’s add some code to that file now.
Adding the Code
At this point, the paint.js file is just an empty JavaScript file. However, since we’ve linked our boilerplate.js file to both paint.js and Jquery-1.4.1.js, our paint.js file has complete access to all of the handy methods that Jquery has to offer. This will make traversing the elements of our document easy, and will require less typing as well.
More...
Getting Started
We’re going to be using the boilerplate.html page found in the download folder that came with this tutorial as a basis for our project. This page contains the necessary markup for an HTML5 page, along with a canvas element predefined within the body. The page is also linked to two JavaScript files.
The first is “Jquery.js”, which can be obtained from Jquery.com, and the second is “paint.js”. We’ll be writing all of our code in the paint.js file, which can also be found in the folder that came with the tutorial. Let’s add some code to that file now.
Adding the Code
At this point, the paint.js file is just an empty JavaScript file. However, since we’ve linked our boilerplate.js file to both paint.js and Jquery-1.4.1.js, our paint.js file has complete access to all of the handy methods that Jquery has to offer. This will make traversing the elements of our document easy, and will require less typing as well.
More...
0 comments:
Post a Comment