HTML5_02 video, audio, Canvas, html5_02canvas

HTML5_02 video, audio, Canvas, html5_02canvas

1. New HTML5 video playing-video:
Example 1: <video src = ""> </video>
② The default video tag is 300*150 inline-block;
③ Member attributes:
Autoplay: whether to play automatically;
Controls: whether to display the playback control;
CurrentTime: The current playback time;
Duration: The total duration;
DefaultMuted: whether to mute by default;
Loop: whether to automatically loop playback;
Muted: Indicates whether to mute the image;
Paused: whether it is in the paused state;
Poster: "", the image displayed before the video is played;
Volumn: The current playback volume;
Preload: pre-loaded content; Value: auto -- automatically pre-loaded video content and buffer a segment; metadata -- only pre-loaded video element data (width and height ); none -- Do not pre-load any data;
④ Member method:
Play (); -- the video starts to play, and the paused attribute changes to false;
Paused (); -- the video is paused. The paused attribute is set to true;
⑤ Member events:
Onplay: fn -- triggered when the v. paly () method is called;
Onpause: fn -- triggered when the v. pause () method is called;
2. audio Playback of HTML5 new features-audio:
Example 1: <audio src = ""> </audio>
② The audio tag is an inline-block of 300*30 by default. If the playback control is not displayed, the display is none;
③ Member attributes:
Autoplay: whether to play automatically;
Controls: whether to display the playback control;
CurrentTime: The current playback time;
Duration: The total duration;
DefaultMuted: whether to mute by default;
Loop: whether to automatically loop playback;
Muted: Indicates whether to mute the image;
Paused: whether it is in the paused state;
Poster: "", the image displayed before the video is played;
Volumn: The current playback volume;
Preload: pre-loaded content; Value: auto -- automatically pre-loaded audio element data content and buffer a segment; metadata -- only pre-loaded audio element data; none -- no pre-loaded audio data;
④ Member method:
Play (); -- the audio starts playing, and the paused attribute changes to false;
Paused (); -- the audio is paused. The paused attribute is set to true;
⑤ Member events:
Onplay: fn -- triggered when the v. paly () method is called;
Onpause: fn -- triggered when the v. pause () method is called;
⑥ The Safari browser in IOS does not support the audio tag. You can use the hidden video instead;
3. Canvas plotting of HTML5's new features:
① Canvas: Canvas. The default value is 300*150 inline-block. CSS Style cannot be used to set the width and height of the Canvas. The width and height attributes can only be used;
② The Canvas itself cannot draw content. It is only used to hold the content to be drawn. The paint brush is created using native JS: var ctx = canvas. getContext ('2d ');
③ Common attributes of Context objects:
FillStyle: "#000000" -- fill style;
StrokeStyle: "#000000" -- stroke/contour style;
Font: "10px sans-serif" -- font size and type
TextAlign: "start" -- text alignment;
TextBaseline: "alphabetic" -- text baseline;
GlobalAlpha: -- Global opacity;
LineWidth: line/stroke width;
ShadowOffsetX: the offset of the shadow on the X axis;
ShadowOffsetY: the offset of the shadow on the Y axis;
ShadowColor: "rgba (,)" -- shadow color and transparency;
ShadowBlur: shadowBlur radius;
④ Common methods for Context objects:
Arc (): draw an arc/circle;
BeginPath (): start to draw a path;
ClosePath (): closes a path;
Fill (): fill the path;
Stroke (): stroke the path;
MoveTo (): Move to a certain point;
LineTo (): draw a line segment to another point;
FillRect (): Fill in a rectangle;
StrokeRect (): draws a rectangle;
ClearRect (): clears all content within a rectangle;
FillText (): Fill in a string;
StrokeText (): stroke a string;
DrawImage (): draws an image;
⑤ Create a linear gradient object:
Var g = ctx. createLinearGradient (x1, y1, x2, y2 );
G. addColorStop (offset1, color1 );
G. addColorStop (offset2, color2 );
⑥ Draw a rectangle (rectangle): The positioning point is located in the upper left corner.
Ctx. fillStyle = "#000"/gradient object; -- fill style;
Ctx. strokeStyle = "#000"/gradient object; -- stroke style;
Ctx. lineWidth =; -- stroke width;
Ctx. fillRect (x, y, w, h); -- fill in a rectangle;
Ctx. strokeRect (x, y, w, h); -- stroke a rectangle;
Ctx. clearRect (x, y, w, h); -- clears the content within a rectangle;
7. Draw text: the text positioning point is at the leftmost of the entire string text baseline.
Ctx. textBaseline = "alphabetic"; // text baseline. Optional values: top, middle, alphabetic, and bottom;
Ctx. font = "10px sans-serif ";
Ctx. fillText (txt, x, y );
Ctx. strokeText (txt, x, y );
Ctx. measureText (txt). width; // measure the text width;