Building the User Interface by Using HTML5: Text, Graphics ... - server

More documents

Recommendations

Info

38 | Lesson 23. Replace the markup for the figure that follows the h1 element with the following,replacing the image file names (doghappy.jpg, dogpaws.jpg, and dogwalk.jpg) withyour image file names:LICENSED PRODUCT NOT FOR RESALEHappy dogs are good dogs4. Save the file as L2-pet-multpimage.html and view it in a Web browser. The pageshould look similar to Figure 2-13.Figure 2-13The Web page with multipleimages and a captionIllustrations: © MightyIsland/iStockphoto5. Close the L2-pet-multpimage.html file. Leave the editing tool and Web browser openif you’re continuing immediately to the next exercise.Creating Graphics with CanvasThe canvas element is new in HTML5 and creates a container for graphics, and usesJavaScript to draw the graphics dynamically.With canvas, the Web page becomes a drawing pad, and you use JavaScript commands todraw pixel-based shapes on a canvas that include color, gradients, and pattern fills. Canvasalso enables you to render text with various embellishments, and animate objects by makingthem move, change scale, and so on.
Building the User Interface by Using HTML5: Text, Graphics, and Media | 39TAKE NOTE*Developers use canvas to create online games, rotating photo galleries, stock tickers, andmuch more. The canvas element graphics and animation functions are intended to providequality similar to those in Flash movies.CANVAS BASICSTo use canvas, you first define a canvas in HTML. The basic syntax for the canvas element isas follows:LICENSED PRODUCT NOT FOR RESALECERTIFICATION READYWhat is the basic syntaxfor the canvas element inan HTML document?2.2This element creates your drawing pad. The canvas element requires the id attribute to referencethe canvas in JavaScript and to add it to the Document Object Model (DOM). You should alsospecify the dimensions of the canvas—the height and width—which are in pixels. JavaScriptworks with the two-dimensional (2D) application programming interface (API) to actually drawitems on the canvas.USE THE CANVAS TO CREATE A SHAPEGET READY. To use the canvas element to create a shape, perform the following steps:1. In your editing tool, type the following markup:Canvas Testfunction f1() {var canvas =document.getElementById("smlRectangle");context = canvas.getContext("2d");context.fillStyle = "rgb(0,0,255)";context.fillRect(10, 20, 200, 100);}TAKE NOTE*You can include JavaScripts inside the head element of your HTML document, or in anexternal file.The onload attribute causes the JavaScript function in the script to run. This scriptfirst finds the element with the id smlRectangle:var canvas = document.getElementById("smlRectangle");
Page 1 and 2: Building the UserInterface by Using
Page 3 and 4: Building the User Interface by Usin
Page 5: Building the User Interface by Usin
Page 17: Building the User Interface by Usin

Building the User Interface by Using HTML5: Text, Graphics ... - server

Create successful ePaper yourself

Delete template?

Save as template?