H5API

Time:2021-10-26

H5API

New HTML5 features

Tag: NAV article footer header aside

New feature of the form: the value of input type is date time week email number

Form attribute form Formaction from method required readonly disabled

Form control label: progress meter datalist

1. H5api (JS part in HTML5)

Before the advent of HTML5, to display video, audio and animation on the network, flash was the most used tool in addition to the player independently developed by a third party. However, various plug-ins need to be installed on the browser, and sometimes the speed is very slow. HTML5 adds two media related tags that allow developers to embed cross browser audio and video content in web pages without relying on any plug-ins. These two tags are < audio > < video >

Media (audio and video)

canvas

Drag

Local storage

​ sessionStorage

webSocket

1.1 user defined data attributes

Data ID is a kind of attribute called user-defined data attribute. It gives us the ability to embed user-defined data attributes on all HTML elements. Rather, we can exchange proprietary data through HTML and DOM. All properties can be accessed through htmlelement.prototype.dataset. Custom properties can be saved to dataset.
get attribute
​    document.getAttribute
​     $(dom).attr()
​     dom.dataset
<script>
        window.onload=function(){
            var div=document.querySelector('#one');
            console.log(div.dataset)
            console.log(div.dataset.id)
            console.log(div.dataset.item)
        }
</script>
  <div id="one" flag='two' data-id='1001' data-item='test'></div>

1.2 media elements

1.video

Before the video tag appeared, it was very difficult to play video or audio data in web pages. The video tag in H5 can play video as easily as using img to display pictures.

Video provides many properties and methods. We can control the display of video directly or through JS

The read / write attribute SRC autoplay poster loop constrol width height is generally not used together

Constrol is the control bar Loop is a loopAutoplay is autoplayPOSTER = ‘put cover address muted

Method play play pause paused toggles whether it is a paused state volume controls the volume currenttime the current playback seconds playbackrate multiple playback

1. Properties
1. Progress bar controls
<video  controls> </video>
2. Whether autoplay will be played automatically once the page is loaded
<video  controls autoplay> </video>
3. Post cover
<video poster='./img/1.jpg'> </video>
4. Loop playback
<video controls loop> </video>
5. Muted mute
<video controls loop autoplay> </video>
2. Method 
1. Play
 var video=$('video')[0];
 If ($(this). Text() = = = 'play'){
              video.play()
 }
2. Pause
 If ($(this). Text() = = = 'pause'){
              video.pause()
  }
3. Switch whether the paused audio and video is suspended
If ($(this). Text() = = = 'switch'){
                    if(video.paused){
                        video.play()
                    }else{
                        video.pause()
                    }
}
4. // control the volume+
   If ($(this). Text() = = = 'volume +'){
      
       video.volume=(video.volume>0.9?0.9:video.volume )+0.1
   }
5. If ($(this). Text() = = 'volume -'){
        video.volume=(video.volume<0.1?0.1:video.volume)-0.1
   }
6. // fast forward
 If ($(this). Text() = = = 'fast forward'){
        video.currentTime+=5
  }
7. // fallback
  If ($(this). Text() = = = 'fallback'){
      video.currentTime-=5
 }
8. // multiple playback
 If ($(this). Text() = = = 'double speed playback'){
   video.playbackRate=0.5
 }
3. Events
video.onvolumechange=function(){
                //Console.log ('volume change event monitoring ')
                if(this.volume===0.5){
                    Alert ('continue to raise the sound will damage the eardrum ')
                }
   }

2. Audio

The audio element is similar to video and is used to play audio. Its attribute and method events are almost consistent with the video element

<!--  Without control, it is equivalent to background music -- >
<audio controls loop autoplay></audio>

2. Canvas

1. Master the basic concept of canvas element, learn how to place a canvas element on the page, and how to use canvas element to draw a simple rectangle
2. Master the method of using the path, and be able to draw circles and polygons using the path
3. Master the drawing method of gradient graphics, learn graphics deformation, graphics scaling, graphics combination, and the method of drawing shadows for graphics

1. Basic usage
(1) Get canvas object -- get canvas
    Obtain the canvas object through methods such as document. Getelementbyid().
(2) Get context -- get brush
    Graphic context is an object that encapsulates many drawing functions, and the parameter can only be "2D"
(3) Define fill patterns
    context.fillStyle='red'
(4) Draw fill graphics
    Context. FillStyle (10,10100100) // the first parameter is the starting position of the X axis, the second parameter is the starting position of the Y axis, the third parameter is the width of the drawn graph, and the fourth position is the height of the drawn graph
1. Instance -- draw a filled rectangle
//Through fillRect
window.onload=function(){
            //1. Get canvas
            var canvas=document.querySelector('canvas');
            //2. Get canvas context object
            var context=canvas.getContext('2d');
            //3. Draw fill pattern
            context.fillStyle='red'
            //4. Draw a filled rectangle
            context.fillRect(10,10,100,100)
}


//Draw outline rectangle
window.onload=function(){
             //1. Get canvas
            var canvas=document.querySelector('canvas');
            //2. Get canvas context object
            var context=canvas.getContext('2d');
               //Set profile style
            context.strokeStyle='red'
            //Sets the lineweight of the profile
            context.lineWidth=4;
            //Draw a border rectangle or outline rectangle
            context.strokeRect(10,10,100,100);
            //Clear some areas
            context.clearRect(0,0,50,50);
            //Clear all areas
            context.clearRect(0,0,400,400)
}
2. Example -- draw circle
window.onload=function(){
            //Get canvas
            var canvas=document.querySelector('canvas');
            //Get canvas上下文对象
            var context=canvas.getContext('2d');
            //Drawing a circular straight line curve requires a path to start
            context.beginPath();
            //Path of circle x y r start radian end radian is the direction of circle counterclockwise path
            //Math.pi -- 180 degrees
            context.arc(100,100,50,0,Math.PI,true);
            // context.arc(100,100,50,0,Math.PI/2);
            //Straight path
            context.lineTo(100,100);
            context.lineTo(150,100);
            context.arc(300,300,50,0,Math.PI*2);
            //End path
            // context.closePath();
            //Fill pattern
            context.fillStyle='red'
            //Draw a filled circle
            context.fill();
            //Draw outline
            // context.stroke();

}
3. Movement of instance circle
window.onload=function(){
            //Get canvas
            var canvas=document.querySelector('canvas');
            //Get canvas上下文对象
            var context=canvas.getContext('2d');
            var bubble={
                x:100,
                y:100,
                r:50,
                color:'red'
            };
            draw(bubble);
            move(bubble)
            setInterval(function(){
                //Clear canvas
                context.clearRect(0,0,600,600);
                move(bubble)
            },200)
            //Drawing method
            function draw(bubble){
               context.beginPath();
               context.arc(bubble.x,bubble.y,bubble.r,0,Math.PI*2);
               context.fillStyle=bubble.color;
               context.fill()
            }
            //Move
            function move(bubble){
                bubble.x+=5;
                bubble.y+=5;
                draw(bubble);
            }

        }

draw

Draw line segments
    moveTo(x,y):
        x. Y: coordinates of the starting point of the line segment
    lineTo(x,y)
        x. Y: end coordinates of line segments
    cx.stroke();
    //Fill(): cannot use
    lineWidth=number;
//Draw line segments
    window.onload=function(){
            //Get canvas
            var canvas=document.querySelector('canvas');
            //Get context 
            var context=canvas.getContext('2d');
            //Draw line segments
            context.lineWidth=3
            context.beginPath();
            context.moveTo(0,0);
            context.lineTo(100,100);
            context.lineTo(200,10);
            context.lineTo(300,100);
            context.closePath();
            context.strokeStyle='red'
     }
deformation
1. Translation 
    translate(x,y):
    x. Y: shift coordinate origin unit
2. Expand (enlarge coordinates)
    scale(x,y):
        x: Represents the magnification in the horizontal direction
        y: Represents the magnification in the vertical direction (if you want to reduce, set the parameter to a value between 0-1)
3. Rotation
    rotate(angle):
        Angle: rotation angle. The center point of rotation is the origin of the coordinate axis
        Rotate clockwise by default. If you want to rotate counterclockwise, set the angle to a negative number
 4. Save and rollback
     [save1,save2,save3]
    Save(): save the current drawing state and save it into the state stack
    Restore (): each call of this method will only roll back to the last save state
  window.onload=function(){
             //Get canvas
             var canvas=document.querySelector('canvas');
            //Get context 
            var context=canvas.getContext('2d');
            context.fillStyle='red'
            //Draw fill rectangle
            context.save()
            context.fillRect(0,0,100,50);
            //Translation
            context.translate(100,100);
              Save once
            context.save();
            // context.fillRect(0,0,100,50);
            context.scale(2,2);
            context.save()
            // context.fillRect(0,0,100,50);
            context.rotate(Math.PI/6);
            context.save()
            context.fillRect(0,0,100,50);
            context.restore();
            context.restore();
            context.restore();
            context.restore();
            context.fillRect(120,0,100,50)
        }
Draw text    
    context.font='16px blod';
    fillText(str,x,y);
    strokeText(str,x,y);
        str:Draw text字符串
        x. Y: display coordinates of text
Draw hour hand
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
             //Get canvas
             var canvas=document.querySelector('canvas');
            //Get context 
            var context=canvas.getContext('2d');
            //Draw disc
            function clock(){
            context.beginPath();
            context.arc(300,300,200,0,Math.PI*2);
            context.fillStyle='pink'
            context.fill();
            context.closePath();
            //Drawing time degree
            for(i=0;i<12;i++){
                context.save();
                context.translate(300,300);
                context.rotate(i*(Math.PI/6))
                context.beginPath();
                context.moveTo(0,-180);
                context.lineTo(0,-200);
                context.closePath();
                context.lineWidth=4;
                context.fillStyle='black';
                context.rotate(Math.PI/6);
                context.font='16px bold'
                context.fillText(i+1,-5,-220)
                context.stroke();
                context.restore();
            }
            //Draw graduation
            for(i=0;i<60;i++){
                context.save();
                context.translate(300,300);
                context.beginPath();
                context.rotate(i*(Math.PI/30))
                context.moveTo(0,-190);
                context.lineTo(0,-200);
                context.stroke();
                context.closePath();
                context.restore();
            }
            //Get current time
            var today=new Date();
            var hour=today.getHours();
            var min=today.getMinutes();
            var sec=today.getSeconds();
            // 
            hour=hour+min/60;

            // Draw hour hand
            context.lineWidth=4
            context.save();
            context.translate(300,300);
            context.rotate(hour*Math.PI/3);
            context.beginPath();
            context.moveTo(0,10)
            context.lineTo(0,-100);
            context.stroke()
            context.closePath();
            context.restore();
            //Draw minute hand
            context.lineWidth=3
            context.save();
            context.translate(300,300);
            context.rotate(min*(Math.PI/30));
            context.beginPath();
            context.moveTo(0,10);
            context.lineTo(0,-160);
            context.stroke()
            context.closePath();
            context.restore();
            //Draw second hand 
            context.lineWidth=2
            context.save();
            context.translate(300,300);
            context.rotate(sec*Math.PI/30);
            context.beginPath();
            context.moveTo(0,10);
            context.lineTo(0,-180);
            context.strokeStyle='red'
            context.stroke()
            context.closePath();
            context.restore();


            //Draw intersections
            context.lineWidth=1
            context.save();
            context.translate(300,300);
            context.beginPath();
            context.arc(0,0,5,0,Math.PI*2);
            context.fill();
            context.fillStyle='#ccc'
            context.strokeStyle='red'
            context.stroke()
            context.closePath();
            context.restore();
            }
            setInterval(clock,1000)
            clock()

        }
    </script>
</head>
<body>
    <canvas width="600px" height="600px" style="background-color: #ccc;"></canvas>
</body>
</html>
Draw image
 window.onload=function(){
             //Get brush
            //Get canvas
            var canvas=document.querySelector('canvas');
            //Get context 
            var context=canvas.getContext('2d');
            //Create img node to draw pictures into canvas, picture DOM node, IMG node to draw or create img node
            var img=new Image();
            img.src='./2.jpg';
            img.onload=function(){
                //Draw a picture to the canvas, start at 0,0 points, and draw a 200 * 200 picture
            context.drawImage(img,0,0,200,200);
            }
}
Draw video
window.onload=function(){
             //Get brush
            //Get canvas
            var canvas=document.querySelector('canvas');
            //Get context 
            var context=canvas.getContext('2d');
            var video=document.querySelector('video');
            draw()
               function draw(){
               context.drawImage(video,0,0,200,200);
                //Request animation frame
               requestAnimationFrame(draw)
           }
}

Drag

1. Drag and drop technology is implemented in H5, which allows users to drag and drop within the web page and between the browser and other applications. Data can be transferred through drag and drop.
Drag events: dragstart, drag, drag
Drop events: drawer, drawer, drop
Drag event flow:
When you drag an element onto the target element, it will be triggered in the following order
dragstart->drag->dragenter->dragover->drop->dragend
-----------------------------------------------------------------------
2. In the drag event, we can realize data interaction through datatransfer, and obtain the datatransfer instance through event.datatransfer
Methods: SetData, GetData, cleardata
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .parent {
            height: 200px;
            border: 1px solid red;
        }

        .child {
            width: 100px;
            height: 100px;
            border: 1px solid rgb(94, 68, 211);
            float: left;
            margin: 10px;
        }

        body {
            height: 400px;
        }
    </style>

    <script>

        window.onload = function () {
            var parent = document.querySelector('.parent')
            var childs = document.querySelectorAll('.child')
            // console.log(childs);   Is an array of classes
            //Convert to array
            childs = Array.from(childs)
            // console.log(childs);

            //Each child has an event, so use foreach to reduce code redundancy
            childs.forEach(function (item, idex) {
                //Start drag and drop
                item.ondragstart = function (event) {
                    Console.log ('ondragstart start ');
                    Console.log ('event is', event);
                    event.dataTransfer.setData('id', item.id);
                };
                //Dragging and dropping
                item.ondrag = function () {
                    Console.log ('ondrag dragging ');
                }
                //Drag and drop end
                item.ondragend = function () {
                    Console.log ('ondragend ');
                }
            });

            //The parent places the event into the target element
            parent.ondragenter = function () {
                Console.log ('ondragener enters the target element ');
            }
            //Drag and drop in drop objects
            parent.ondragover = function (event) {
                //Cancel the default behavior of the event. // set the target element to be placed
                event.preventDefault();
                Console.log ('ondragover drag and drop in drop object ');
            }
            //Drag and drop the drag object into the drop object
            parent.ondrop = function () {
                Console.log ('ondrop drag and drop the drag object into the drop object ');
                //Id get the child node ID, that is, one
                //Obtain the data in the data transmission object, obtain the node through the data, and place the node
                var id = event.dataTransfer.getData('id')
                //Select DOM node id = "one"
                var dom = document.querySelector('#' + id)
                //Append node
                this.appendChild(dom)
                //Because the event trigger of the child element will trigger the trigger event of the parent element
                //Prevent event bubbling
                event.stopPropagation();
            }



            
            //Drag and drop objects into the body
            document.body.ondragover = function (event) {
                //Cancels the default behavior of the event because the object is not placed on the body by default
                event.preventDefault()
            }
            //
            document.body.ondrop = function (event) {
                //Id get the child node ID, that is, one
                //Obtain the data in the data transmission object, obtain the node through the data, and place the node
                var id = event.dataTransfer.getData('id')
                //Because ID is a variable, we need to obtain four different DOM nodes, so we use the form of splicing
                var dom = document.querySelector('#' + id)
                //Append node  this指的是body
                this.appendChild(dom)
            }
        }
    </script>
</head>

<body>
    <div class="parent"></div>
    <!--  The draggable attribute specifies whether an element can be dragged -- >
    <div class="child" id="one" draggable="true">1</div>
    <div class="child" id="two" draggable="true">2</div>
    <div class="child" id="three" draggable="true">3</div>
    <div class="child" id="four" draggable="true">4</div>
</body>

</html>

H5API

Recommended Today

Object memory layout and object access location

First, feel the memory layout through an example CustomerTest public class CustomerTest { public static void main(String[] args) { Customer cust = new Customer(); } } Customer image.png Memory layout at this time image.png notice: 1. Runtime metadata:There are some information describing the current instance, such as hash value and lock status.2. Name is the […]