<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>1</title>

    <style type="text/css">

    *{margin: 0;padding: 0;}

    </style>

    <script type="text/javascript">

    /*

    let const 只在申明的块中有效

    const申明的变量，类型不能变 var可以变类型

    const申明常量用大写

    */

    var a=1;

    {

        let a=3;

        console.log(a);

        const ARR=[1,2];

        ARR.push(3);

        console.log(ARR);

        // ARR=10;//此处会报错

    }

    console.log(a);

    {

        let a=(x)=>(x*2);

        console.log(a(10));

    }

    {

        let a=(x,y=10)=>(x+y);

        console.log(a(2),a(2,3));

    }

    {

        let a=(x)=>function(){

            return 2;

        }();

        console.log(a(1));

    }

    {

        let a=[1,2,3];

        let b=a.map(f=>{

            return f+'s';

        });

        console.log(b);

    }

    {

        function Person(){

            this.age=0;

            this.addAge=()=>(this.age++);

        }

        let p=new Person();

        p.addAge();

        console.log(p.age);

    }

    //创建canvas及画图

    let newCanvas=()=>{

        let c=document.createElement("canvas");

        c.width=window.screen.width;

        c.height=window.screen.height;

        let d=c.getContext("2d");

        d.fillStyle="red";

        d.fillRect(10,10,100,100);

        return c;

    };

    //canvas保存为图片

    let canvasToImg=(canvas)=>{

        let image=new Image();

        image.src=canvas.toDataURL('image/png');

        return image;

    };

    window.onload=()=>{

        //写出canvas图片

        document.body.appendChild(canvasToImg(newCanvas()));

    }

    </script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

    <head>

        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <title>预览本地文件</title>

        <style type="text/css">

        video{

            background-color: #000;

        }

        </style>

        <script type="text/javascript">

        /**

        * 从 file 域获取 本地图片 url

        */

        function getFileUrl(sourceId) {

            var url;

            if (navigator.userAgent.indexOf("MSIE")>=1) { // IE

                url = document.getElementById(sourceId).value;

            } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox

                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));

            } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome

                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));

            }

            return url;

        } 

        /**

        * 将本地图片 显示到浏览器上

        */

        function preImg(sourceId, targetId){

            var url = getFileUrl(sourceId);

            console.log(sourceId,targetId);

            var imgPre = document.getElementById(targetId);

            imgPre.src = url;

        }

        </script>

    </head>

    <body>

        <form action="">

            <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" />

            <!-- <img id="imgPre" src="" width="300px" height="300px" style="display: block;" />  -->

            <video id="imgPre" width="300px" height="300px" controls="controls" style="display: block;"></video>

        </form>

    </body>

</html>