If XHTML has begun to seek to replace HTML, then the practicality of HTML5 is that it integrates the two syntaxes and uses the same effective way to express HTML's abstract DOM representation. The HTML5 specification combines HTML4, XHTML1, and DOM level 2HTML, and is updated accordingly.
HTML5 replaces XHTML 1 as the XML serialization format of the HTML specification. Developers can format HTML5 documents using either relaxed HTML syntax or strict XML syntax.
HTML5 includes the following new and updated features:
1. Added a new HTML document type: 2. Added some new structural markup elements (,
1. Painting canvas element
First create the canvas element and specify the id, width and height of the element:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
Copy after login
JavaScript uses id to find canvas elements:
var c=document.getElementById("myCanvas");
Copy after login
Then, create the context object:
var cxt=c.getContext("2d");
Copy after login
The getContext("2d") object is a built-in HTML5 object with multiple methods for drawing paths, rectangles, circles, characters, and adding images.
The following two lines of code draw a red rectangle:
The fillStyle method dyes it red, and the fillRect method specifies the shape, position and size.
The following two lines of code draw a straight line:
cxt.moveTo(100,100);
cxt.lineTo(200,200);
The following line of code draws a circle:
cxt.arc(70,18,15,0,Math.PI*2,false);
What do these attribute values correspond to? 70 and 18 are the X-axis and Y-axis respectively, 15 is the radius of the circle, 0 is the angle, Math.PI*2 is the pi ratio, false means clockwise and true means counterclockwise.
The gradient effect of color can also be achieved:
There are some other effects:
Curve quadraticCurreTo
Font fillText
2. Audio audio and video video
Video also supports multiple source elements to link to different video files. The browser will use the first recognized format Attribute value: Play
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
