1613 HTML5 and JavaScript Projects

2 months ago
Full text

Contents at a Glance

  My approach in developing the projects was to combine features such as canvas and video; attempt more intricate drawing, making use of mathematics; andmake use of standard programming techniques such as object-oriented programming and separation of content and logic. This chapter includes the challenge of mixing up the states in the form of a jigsaw puzzle, including the feature of saving the puzzle-in-progress using localStorage.

How Is This Book Structured?

  Each chapter ends with instructions and tips for testing and uploading the application to a server, and a summary of what you learned. My media (video, audio, images) is included with the code and this includes images for the 50 states for the states game in Chapter 9.

C H A P T E R 1 Building the HTML5 Logo – Drawing on Canvas, with Scaling, and Semantic Tags

  Keep in mind that in thecoordinates, the first number is the distance from the left edge of the canvas and the second number is the distance from the top edge of the canvas. the This particular color, given in the hexadecimal format, where the first two hexadecimal (base 16) digits represent red, the second two hexadecimal digits represent green and the last two represent blue,is provided by the W3C website, along with the other colors, as the particular orange for the background of the shield.

Coordinate transformations

  The amount of the translation is stored in a variable I named offsety: var offsety = 80;… ctx.fillText("HTML", 31, 60);ctx.translate(0, offsety); Since I decided to provide a way for the viewer to change the size of the logo, I made use of the scale transformation. Display in Firefox of scale of 200 CHAPTER 1 BUILDING THE HTML5 LOGO - DRAWING ON CANVAS, WITH SCALING, AND SEMANTIC TAGS■ The canvas is of fixed width and height and drawing outside the canvas, which is what is done when the scaling is done to accept numbers and stretch them out to twice the original value, is ignored.

C H A P T E R 2 Family Collage: Manipulating Programmer-defined Objects on a Canvas

  I deleted the tworectangles and the oval and made duplicates of the circle to position as decoration in the corners of the picture. The informationwill include the position of each item, how it is to be drawn on the canvas and how to determine if the mouse cursor is on the item.

JavaScript objects

  My strategy is to define new types of objects, each of which will have two methods defined draw for drawing the object on the canvas These methods reference the attributes of the object and use these values in mathematical expressions to produce the results. The newly constructed object holds the values 2 and 10 term for the initial x and y position, accessed using the attribute names x and y and the values 50 and 50 forwidth and height accessed using the attribute names w and h.

Oval Moving on, the constructor function for Oval is similar

  I came up with the following: a heart shape is defined by the position,an x, y pair of values that will be the location of the cleft of the heart; the distance from the cleft to the bottom point, and the radius for the two partial circles representing the curved parts of the heart. The equation for a line can be equation for each of the sloping lines and compares the result to written using the slope m and a point on the line x2,y2: y = m * (x – x2) + y2 The code sets m and x2, y2 for the line on the left and then modifies it to work for the line on the right by changing the sign of m.

C H A P T E R 3 Bouncing Video: Animating and Masking HTML5 Video

  Window resized during running to be larger Similarly, if you start the application using a full-size window, or any large window, and resize it to something smaller during the running of the program, you would see something like Figure 3-6, wherethe scroll bars are displayed by the browser to indicate that the content of the document is wider and longer than the window. The command in pseudocode is ctx.drawImage(video element, x position, y position, width, height); This command, formally a method of the ctx canvas context, extracts the image corresponding to the current frame of the video and draws it at the x and y values, with the indicated width and height.

Movable Video Element

  A critical step is to set the positioning to be absolute for all three elements(video, canvas, and button) and position the canvas so that it is located with its upper-left corner in the upper-left corner of the window. The statements that replace the values corresponding to ctx.drawImage statement are v.style.left = String(ballx)+"px";v.style.top = String(bally)+"px"; All the code for both videobounceC and videobounceE will be listed with comments in the “Building the Application and Making It Your Own” section.

Traveling Mask

  The second path starts in the middle of the left edge, proceedsdown to the lower-left corner, goes to the lower-right corner, moves up to the middle of the right side, false as the value of the parameter for direction, and then moves to the left. Having explained the individual HTML5, CSS, and JavaScript features that can be used to satisfy the critical requirements for bouncing video, I’ll now show the code in the two videobounce applicationsalong with the code used to show the trajectory in Figure 3-2.

Building the Application and Making It Your Own

  The two applications for simulating the bouncing of a video clip ball in a two-dimensional box contain similar code, as does the program that produced the picture of the trajectory. Since I wanted the alert statement temporarily to the circle to be similar in size to the masked video clip, I added an videobounceC function after the video width and height were set, and ran the program using thosevalues: v.width = Math.min(v.videoWidth/3,.5*cwidth); v.height = Math.min(v.videoHeight/3,.5*cheight);alert("width "+v.width+" height "+v.height); I then used the values, 106 and 80, to be the videow and videoh values in the trajectory program.

Making the Application Your Own

  > changedims that includes some of the This coding assumes that you have defined a function named statements in the current init function to extract the window.innerWidth and window.innerHeightattributes to set the dimensions of the canvas and the video. Yet anotherpossibility is to provide the viewer a way to change the color of the circle (or other shape you design) using the input type of color.

C H A P T E R 4 Map Maker: Combining Google Maps and the Canvas

  Base at Illinois Institute of Technology in Chicago Again, notice the small red x indicating the base location and the text at the top of the screen with the name of the new base location. Zoomed in all the way By using the interface to zoom out and pan and zoom in again, I can determine the distance from any of the base locations to any other location in the world!

Latitude & Longitude and Other Critical Requirements

  HTML5, CSS, and JavaScript Features The challenges for the map-maker project are bringing in the Google Map and then using the map and canvas and buttons together in terms of appearance and in the operation of the GUI. The important objects are addListener, and this can be used to set up a response to clicking a map.method to set up an event is The Google Maps API is brought into your HTML5 document with a script element: <script type="text/javascript" charset="UTF-8" src="http://maps.google.com/maps/api/js?sensor=false"></script> I will discuss the script tag again, specifically the sensor=false setting, in Chapter 6.

Canvas Graphics

  In the to set up event handling for movement of the mouse, mouse button down, and mouse button up, allregarding the canvas element: can.onmousedown = function () { return false; } ; can.addEventListener('mousemove',showshadow,true);can.addEventListener('mousedown',pushcanvasunder,true); can.addEventListener("mouseout",clearshadow,true);true value for the third parameter indicates that this event is to bubble, meaning that it is to The signal other listeners. The showshadow function determines the mouse position, makes an adjustment so the lightbulb base is at the center of the spotlight, and then makes the call to drawshadowmask: Now I needed to think what I wanted to do when the user pressed down on the mouse.

C H A P T E R 5 Map Portal: Using Google Maps to Access Your Media

  In this chapter, you will explore the following:Using the Google Maps API to play and display video, audio, and images The projects in this chapter make use of the Google Maps API as a way to play video, display images, or play audio and display an image, all based on geographic locations. Zooming out in preparation for a pan south Figure 5-6 shows the result of moving the map to the south and then zooming in to the location of the Statue of Liberty, the targeted location for the fireworks video clip.

Project History and Critical Requirements

  Keep in mind that the student only needed a way to present the work on a computer she set up at the senior project show, so the issue ofnoncompliant browsers was not a concern. The critical requirement for the application is displaying and playing the designatedmedia at the correct time and stopping and removing the media when appropriate, such as when it is time for the next presentation.

HTML5, CSS, and JavaScript Features

  The bestyet variable holds the index of the element in the content array that is the closest to the location where the viewer/player clicked the map. LatLng(content[i][0],content[i][1]);distance = dist(clatlng,latlnga); if (distance < closestdistance) {closestdistance = distance; bestyet = i;} } When the for loop is complete, bestyet holds the index to the best yet, meaning the closest, and closestdisatnce holds the distance to that element, which has been determined to be the closest (smallest) distance.

Dokumen baru