What are the new features of HTML5_html5 tutorial skills-H5 Tutorial-php.cn

What are the new features of HTML5_html5 tutorial skills

WBOY

Release： 2016-05-16 15:46:10

Original

1897 people have browsed it

1. Some interesting new features in HTML5:

Canvas element for drawing
Video and audio elements for media playback
Better support for local offline storage
New special content elements such as article, footer, header, nav , section
New form controls, such as calendar, date, time, email, url, search
2. HTML5 video
1. Video format

Ogg = Ogg file with Theora video encoding and Vorbis audio encoding
MPEG4 = MPEG 4 file with H.264 video encoding and AAC audio encoding
WebM = with VP8 video encoding and Vorbis audio Encoded WebM file
2. Attributes of

* Tag specifies multimedia resources, which can be multiple
3. Instances
(1)

Copy code

The code is as follows:

Video

Effect:

(2) HTML5

Copy code

The code is as follows:

Video

Effect:

Click to enlarge or reduce the video and there will be corresponding changes.
3. Audio1. Audio format

The

control attribute is used to add play, pause and volume controls. The content inserted between is for display by browsers that do not support the audio element. (Same in the video)
4. HTML 5 Canvas (canvas)
1. What is Canvas?
The canvas element is used to draw graphics on web pages .
　*The canvas element of HTML5 uses JavaScript to draw images on the web page. The canvas element itself has no drawing capabilities. All drawing work must be done inside JavaScript.
　*The canvas is a rectangular area that you can control every pixel of.
　*canvas has a variety of methods for drawing paths, rectangles, circles, characters, and adding images.
2. Relevant JS knowledge:
(1) The getContext("2d") object is a built-in HTML5 object, with a variety of drawing paths, rectangles, circles, characters and additions Image method.
　(2) The fillStyle method colors it, and the fillRect method specifies the shape, position and size. [The fillRect method has parameters (0,0,150,75). Meaning: draw a 150x75 rectangle on the canvas, starting from the upper left corner (0,0)】
3. Example
　 (1) Hover the mouse over the rectangle to see the coordinates

Copy code

The code is as follows:

canvas

Hover the mouse over the rectangle below You can see the coordinates on:

onmousemove=" cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()">

< ;/body>

Knowledge point:
*clientX event attribute returns the horizontal coordinate of the mouse pointer to the browser page (or client area) when the event is triggered. The client area refers to the current window.
　*InnerText and innerHTML can add corresponding information to the tag body.
Effect:

(2) Draw lines

Copy code

The code is as follows:

canvas

Knowledge points:
*moveto is to move to a certain coordinate, and lineto is to connect a line from the current coordinate to a certain coordinate. These two functions add up to draw a straight line. To draw a line, you need to use a "pen", then MoveToEx() fixes the starting position of the pen to be drawn (x, y), and then to fix the ending position, you need to use the LineTo function to determine the ending position (xend, yend), so that a line Drawn. Each time it is connected to the previous coordinate.
　The *stroke() method will actually draw the path defined by the moveTo() and lineTo() methods. The default color is black.
Effect:

(3) Draw a circle
　*fill() method fills the current image (path). The default color is black.
*arc() method creates arc/curve (used to create a circle or partial circle): context.arc(x,y,r,sAngle,eAngle,counterclockwise);

Center: arc(100,75,50,0*Math.PI,1.5*Math.PI)
Start angle: arc(100,75,50,0,1.5*Math.PI )
End angle: arc(100,75,50,0*Math.PI,1.5*Math.PI)

* Cxt.beginPath(): Open the path. After opening, you can reset related attributes. Cxt.closePath(): Close a path.

Copy code

The code is as follows:

canvas

< /body>

Effect:

(4) Color Gradient
　*createLinearGradient() method creates a linear gradient object. Gradient can be used to fill rectangles, circles, lines, text, and more. Use the addColorStop() method to specify different colors and where to position the colors in the gradient object. JS syntax: context.createLinearGradient(x0,y0,x1,y1):

*addColorStop() method specifies the color and position in the gradient object. JS syntax: gradient.addColorStop(stop,color);

Copy code

The code is as follows:

画布

　　效果：

（5）把一幅图像放置到画布上
　　*drawImage() 方法在画布上绘制图像、画布或视频。也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。
　　　　*JS语法1：在画布上定位图像：context.drawImage(img,x,y);
　　　　*JS语法2：在画布上定位图像，并规定图像的宽度和高度：context.drawImage(img,x,y,width,height);
　　　　*JS语法3：剪切图像，并在画布上定位被剪切的部分：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

复制代码

代码如下:

画布