1, HTML5
- Adjust the size of the video and select the type of video (type=video/mp4/webm/ogg)
- Pause and pause methods
- Element supports multiple elements Element can link different video files. The browser will use the first recognizable format
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> </video>
2, You can customize elements
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>by HTML Add new element</title>
<script>
document.createElement("myHero")
</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>My first title</h1>
<p>My first paragraph.</p>
<myHero>My first new element</myHero>
</body>
</html>
3, Solve the problem that H5 cannot be recognized by IE6-8 and
Add the following comment to the element
<!--[if lt IE 9]> <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]-->
4, Element
The element is a canvas. You can set the width, height and border, but you can't draw on it. You need to draw an image through JavaScript
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
Resolution:
First, find the element:
var c=document.getElementById("myCanvas");
Then, create a context object:
var ctx=c.getContext("2d");
getContext("2d") object is a built-in HTML5 object, which has a variety of drawing paths, rectangles, circles, characters and methods of adding images.
Definition and Usage
The getContext() method returns an environment for drawing on the canvas.
grammar
Canvas.getContext(contextID)
parameter
The parameter contextID specifies the type you want to draw on the canvas. Currently, the only legal value is "2d", which specifies 2d drawing and causes this method to return an environment object that exports a 2d drawing API.
Tip: in the future, if the tag is extended to support 3d drawing, the getContext() method may allow passing a "3d" string parameter.
The following two lines of code draw a red rectangle:
ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);
Setting the fillStyle property can be CSS color, gradient, or pattern. FillStyle defaults to #000000 (black).
The fillRect(x,y,width,height) method defines the current filling method of the rectangle.
The fillRect method above has parameters (0,0150,75).
It means: draw a 150x75 rectangle on the canvas, starting from the upper left corner (0,0).
in addition
To draw a line on Canvas, we will use the following two methods:
moveTo(x,y) defines the line start coordinates
lineTo(x,y) defines the end coordinates of the line
To draw lines, we must use the "ink" method, like stroke()
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
To draw a circle in canvas, we will use the following method:
arc(x,y,r,start,stop)
Canvas - text
fillText(text,x,y) - draws solid text on canvas
strokeText(text,x,y) - draws empty text on canvas
Canvas - gradient
createLinearGradient(x,y,x1,y1) - creates a line gradient
createRadialGradient(x,y,r,x1,y1,r1) - creates a radial / circular gradient
Canvas - image
drawImage(image,x,y)
5, SVG
Definition: SVG refers to scalable vector graphics
Type:
- Rectangle < rect >
- Circle < circle >
- Ellipse < ellipse >
- Line < line >
- Polyline < polyline >
- Polygon < polygon >
- Path < path
>
Here we use rectangle rect to take a chestnut as an example:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" rx="20" ry="20" width="300" height="100" style="fill:blue;stroke-width:1;stroke:pink;fill-opacity:0.1; stroke-opacity:0.9"/> </svg>
The X attribute defines the left position of the rectangle (for example, x = "0" defines that the distance from the rectangle to the left of the browser window is 0px)
The Y attribute defines the top position of the rectangle (for example, y = "0" defines that the distance from the rectangle to the top of the browser window is 0px)
The rx and ry attributes round the rectangle.
The width and height attributes of the rect element define the height and width of the rectangle
The style attribute is used to define CSS attributes
The fill property of CSS defines the fill color of the rectangle (rgb value, color name or hexadecimal value)
The stroke width property of CSS defines the width of the rectangular border
The stroke property of CSS defines the color of the rectangular border
The fill opacity property of CSS defines the fill color transparency (legal range: 0 - 1)
The stroke opacity property of CSS defines the transparency of outline color (legal range: 0 - 1)
Besides
SVG text (the display path of the text can be set)
SVG Strokes attribute (set line attribute, solid line and dashed line, etc.)
Svg filter (realize image blur and color change effects, including SVG blur effect and SVG shadow)
SVG gradient linear
SVG gradient radioactivity
6, Use geolocation
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
x.innerHTML="The browser does not support getting geographic locations.";
}
}
function showPosition(position)
{
x.innerHTML="latitude: " + position.coords.latitude +
"<br>longitude: " + position.coords.longitude;
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="The user rejected the request to get the geographic location."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is not available."
break;
case error.TIMEOUT:
x.innerHTML="The request for the user's geographic location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="Unknown error."
break;
}
}
- Detect whether geolocation is supported
- If so, run the getCurrentPosition() method. If not, a message is displayed to the user.
- If getCurrentPosition() runs successfully, it returns a coordinates to the function specified in the parameter showPosition
object - The showPosition() function obtains and displays longitude and latitude