The above code accesses the coordinates of the mouse in order to retrieve an x,y coordinate.
To get the basics of our paint program going, we’ll first handle the “mousemove” event by defining our onMouseMove() method, as follows: 1 Finally, we’ll add a set of listeners for each div button, to handle clicking the div and changing the color accordingly. We’ll also monitor the “click” event on the canvas, for stamping images on the screen when the mouse is clicked (if a stamp was selected by the user). This will allow us to paint as the mouse is moved across the screen. The first listener is to handle the “mousemove” event. This allows us to maximize the paint screen according to the window size. Note in the above code, we’ll also automatically adjust the width and height of the canvas to size to the window. Window.addEventListener( 'load', function( ), false) We can also simply include our init.js file and have it automatically add an event listener to the window, as follows: 1 There are a variety of methods for doing this, such as overriding the “onload” event within the body tag. The next step is to perform our logic upon loading the page. We now have a web page with an HTML5 canvas element. With the HTML defined, we can start our initial programmatic hook to gain access to the canvas. Once clicked, we’ll change the appearance of the div border, to simulate focus on the button. We simply color the div background and set a border, to simulate the appearance of a button. We’ve also defined a couple of div objects, to serve as buttons for our toolbar. All paint commands will be issued against the canvas element. Notice the above page contains a “canvas” tag element within the page.
We’ve also included a link to our own Javascript files paint.js, and init.js. Notice in the above HTML page, we’ve included a Javascript link to the jQuery library from Google’s CDN (content distribution network), which saves us from having to host the file ourselves. Supported browsers: Opera, Firefox, Safari, and Konqueror. Supported browsers listed below, or draw the image you want using an Unfortunately, your browser is currently unsupported by our webĪpplication. The HTML source code for a simple page can appear, as follows: 1 Since we’ll be using Javascript to reference the canvas element and toolbar buttons, we’ll also include a link to the jQuery library. The canvas element is actually an HTML5 tag, located within the body of the web page. HTML5 Easy Paint Starting with a Web PageĪs with any HTML5 application, you can start out with a simple web page, containing the canvas element. We’ll create a toolbar, containing a set of paint colors and image stamps, and allow the user to paint within the canvas element and even save the image.īefore getting started with the details behind implementing the HTML5 canvas paint application, let’s take a look at the actual paint app running in the web browser. In this tutorial, we’ll walk through creating a simple paint program in the web browser, with HTML5 and Javascript. The canvas element is quite easy to use, providing a quick and powerful starting point for creating a variety of client-side graphical applications. This new element provides a graphical drawing surface, allowing developers to create graphics and animations, similar to other client-side technologies such as Flash. One of the more talked-about parts of the HTML5 toolkit is the Canvas element. HTML5, as supported by many popular web browsers, already brings together a set of client-side technologies for producing highly interactive and responsive applications. Although HTML5’s formal specification is still under development, the technology is already growing in popularity.
0 kommentar(er)
