JavaScript Advanced Programming Chapter Canvas + Chapter HTML5

• Chapter Canvas

• Chapter HTML5

Chapter Canvas

• <canvas> elements: Set area. JS dynamically draws graphics in this area.
• The Apple-led company. Consists of several sets of APIs.
• The context is pervasive. WebGL (3D context) is not yet popular enough.

Basic usage

• First: the width, height property determines the size of the drawing area. The fallback information is placed between the start and end tags.
• GetContext (): DOM obtains this canvas element object. Then call GetContext () on this object to get the context, and the incoming parameter indicates whether to get a 2d context or a WebGL context.
• Todataurl () method to get the URL for the graphic in the drawing area. Note that this method will error if the canvas canvas is "dirty", that is, from a different domain.

The context

• Draw a simple 2D graphic.
• Coordinate origin in the upper-left corner of the canvas element, origin coordinates (0,0)
• Fill and Stroke: FillStyle and Strokestyle properties.
  • The stroke width is controlled by the LineWidth property.
  • The LineCap property controls the shape at the end of the line
  • The LineJoin property controls how lines intersect.
• Draw rectangle: FillRect (), Strokerect () method, Clearrect () method. 4 Parameters: The x, y coordinates of a rectangle, the width and height of the rectangle.
• To draw a path:
  • Start: Beginpath ()
  • A series of drawing methods
  • End: Closepath ()/fill ()/stroke ()/clip ()
  • Whether on the path: Ispointinpath ()
• Draw text:
  • Filltext ()/stroketext (): 4 Properties: String, x, y coordinate, optional maximum pixel width
  • 3 Properties: Font, TextAlign, textbaseline
  • The secondary determines the text size: Measuretext () method, which returns the Textmetrics object, only the Width property.
• Transform:
  • For example rotate (angle)/scale ()/translate ()/transform ()/settransform
  • Record Status: Save ()
  • Return to Previous status: Restore ()
  • Records and returns are in the form of a stack structure that can be entered or returned at a level.
  • Records and returns are only used for status or settings.
• Drawing images (processing of or <canvas> images)
  • DrawImage (): Multiple control modes
• Shadow
• Gradient:
  • Createlinergradient ()/createradiagradient (), Addcolorstop ()
  • Note the coordinates match.
• Mode (duplicate image) Createpattern ()
• Working with image data (get Rgba)
  • Getimagedata () Gets the raw image data and returns an instance of the ImageData object.
  • The above objects have width, height, and data properties.
  • The Data property is an array, and each four bits represents a pixel
  • You can set grayscale filters or other filters in turn.
  • Putimagedata () Draws the image data onto the canvas.
• Synthesis:
  • Globalalpha Properties: Universal Transparency
  • Globalcompositionoperation properties: How to synthesize. Browser differences exist.

Webgl

• Typed array: View--typed view. is the foundation of the WEBGL project.
• Context: PDF p488-497

Chapter HTML5 Script Programming

• HTML5 adds new tags, and also spends a certain amount of time stipulating some JS APIs to simplify complex operations. This chapter introduces cross-document messaging, drag-and-drop APIs, audio and video, historical state management, and more.

Cross-Document Message delivery (Cross-document MESSAGING:XDM)

• With PostMessage () for message passing, the PostMessage () method can be used not only here, but also as "transferring data to another place". In XDm, "Another Place" refers to another field, which typically passes the message to the <iframe> element of the current page or to a window that pops up from the current page.
• For example, the <iframe> element of the current page contains another field:
• The current page needs to be done:
  • PostMessage () passed in two parameters: the source domain of the message and message to be passed in---this means that you actually need to get the Window object (proxy) of the "another domain" to use this method on it. See next step.
  • You can get the window object or the proxy for the target domain by document.getElementById ("MyFrame"). Contentwindow, which is the Contentwindow property. The method can be called to pass in data.
  • Data does not necessarily need to be a string, but the case of non-strings differs between browsers. Strings can be processed using json.stringify ()/json.parse ().
  • This approach ensures security, after all, the second parameter is a known address.
• The fields in <iframe> need to be done:
  • The message event is fired. The event object for the OnMessage handler has three important properties.
  • Three attributes of event: Data, origin, source
  • You can process data by ensuring that origin (the domain of origin) is eligible, and then send a message to the source via source (the proxy to the window object of the source), called: Event.source.postMessage ().
  • Because source is only a proxy, there are limited properties and methods that can be accessed. It is recommended to use the PostMessage () method only.
• Notice that the PostMessage () method is called on the proxy object of the domain to which the message is being delivered.

Native drag and drop

• Note that HTML5 provides some JS APIs to expose the programmer to the properties or methods that can be used, and it is more of a matter of how the browser provides some indication of how these methods or properties (or events) respond.
• Drag and drop generally consider 3 stages: the object being dragged, the drag-and-drop process, and the target object being placed.
• Corresponds to some drag-and-drop events: There is a dragstart/drag/dragend for the object being dragged, and a dragenter/dragover/dragleave or drop for the placed target object. Very well understood.
• Custom drop target: For some elements the default is not allowed as a drop target, because the default is not allowed, so you can override the default behavior in DragEnter and DragOver, that is, prevent the default behavior from occurring. To customize the drop target.
• The DataTransfer object, which implements data exchange during a drag-and-drop operation, is an event property that is used to pass string-formatted data from the dragged element to the drop target element.
  • SetData ()/getdata () method: Set and get data. GetData () is handled in the drop event. Note the processing of short data types and MIME types when SetData () is handled across browsers.
  • Dropeffect/effectallowed: Together, you can determine which placement behavior the dragged element can perform (and the browser will show the effect). The DropEffect is set in the OnDragEnter event handler for the drop target. The Effectallowed property is set in ondragstart for the target being dragged and dropped.
  • Other Members: AddElement ()/cleardata ()/setdragimage ()/types, etc.
• Draggable property: The global attribute in HTML5 that specifies whether the element can be dragged.

Media Elements

• For <audio> and <video> elements in HTML5. The production of these two elements allows us to reduce the use of Flash plug-ins, and more convenient for cross-browser operation.
• The element itself has some properties and can be selected for multiple MIME types and codecs.
• JS also prescribes some of their more specific and detailed attributes and events to alleviate the tedious process of programming the implementation of some operations.
• You can rely on play () or pause () to implement a custom media player, which is simply a logical question for code authoring.
• JS provides canplaytype () to detect the support of codecs
  • Notice the possibility probably>maybe> null value
  • Therefore, the possibility of passing in MIME types and codecs is greater than just passing in MIME types. Very well understood.
• JS has the native audio constructor, you can wear an audio instance and do some operations.

Historical State Management

• The "Back" and "forward" buttons lose their role, making it difficult for users to switch between different States (page states). You can use the Haschange events mentioned earlier (chapter 13) to monitor the status changes to perform some processing, or use the historical State management API in HTML5.
• Haschange event: The URL parameter list (including all strings after #) is triggered when a change occurs, mainly in Ajax, using the URL parameter sequence to save the state or navigation information. Properties Oldurl, Newurl can implement Location.hash functions. Generally use the latter because there are not many browsers that support Oldurl and Newurl
• The State management API can also change the state of the browser without loading a new page: History.pushstate (), passing in 3 parameters: state object, new status title and optional URL, note that the second parameter is not supported so far, so you can write an empty string, The first information is best to record information about all aspects of the state object in order to use it later.
• After this method is executed, the new state information is added to the historical state stack. And does not really send a request to the server.
• Popstate event: Because the above method changes the history stack, the Back button is available. When the Back button is clicked, the Popstate event is triggered, and its event object contains the state object referred to in the first parameter of the Pushstate () (This is why the information above is required for detailed reasons). Notice that when the browser loads the first State (page), this object is null.
• Replacestate (): The incoming parameter is the same as pushstate (), but does not create a new state in the historical state stack and directs the rewrite of the current state.
• Note that the third parameter of Pushstate () must be the actual URL, or the refresh will result in a 404 error.

JavaScript Advanced Programming Chapter Canvas + Chapter HTML5