笔记之_java整理html5

Posted 2020-10-15

查看手机唯一标识：http://html5plus.org/doc/zh_cn/device.html#plus.device.uuid
html和html5的区别?
html5+css3也逐渐的成为新一代web前端技术，最要用处在开发手机网站.
文档网站：http://www.w3school.com.cn/html5/index.asp
HTML5的新功能
(1)、强大的绘图功能
(2)、新增音频/视频标签 
(3)、浏览器离线存储
(4)、通过浏览器进行定位
外网连接局域网的项目：花生壳?内网穿透?
页面中自适应手机：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
高德开放平台：高德程序员、创建应用、添加新key
Html5标签
HTML5 视频
      <video src="movie.ogg" controls="controls">
       </video>
HTML5 音频
       <audio src="song.ogg" controls="controls">
       </audio>
HTML5 拖放
HTML5 画布：Canvas
      定义画布，宽200.  高 100
       <canvas id="myCanvas" width="200" height="100"></canvas>
      javascript对画布进行处理
       <script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");  //创建2d画布
cxt.fillStyle="#FF0000";     //画布填充色
cxt.fillRect(0,0,150,75);   //填充矩形 (x,y ,width,hegiht)
</script>
HTML5 SVG
HTML5 画布 vs SVG
HTML5 地理定位
单独没有意义，你要取得座标（经度和纬度） 与 地图合起来用
    <script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
              else{x.innerHTML="Geolocation is not supported by this browser.";}
  }

function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br />Longitude: " + position.coords.longitude;    
  }
</script>
HTML5 Web 存储
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
它们的语法都是     xxxx.变量名=”值“;
HTML5 应用缓存
HTML5 Web Workers
HTML5 服务器发送事件
 都是移动app用的
    数字：<input type="number" placeholder="请输入数字" />
        <hr/>
        邮箱：<input type="email" placeholder="请输入邮箱"/>
        <hr/>
        电话：<input type="number" />        
        <hr/>
        日期：<input type="date" />        
        <hr/>
        范围：<input type="range" name="points"   min="1" max="10" />



















    1、创建一个画布
            var circlePoint={"context":null,"timer":null,  "x":20,  "y":10};
            window.onload=function(){
                fillColor();
            };
            function $(id){
                return document.getElementById(id);
            }
            function fillColor(){
                var obj=$("can");
                //得到2d画布
                circlePoint.context=obj.getContext("2d");
                //填充 蓝色的背景
                circlePoint.context.fillStyle="#FFCC99";
                circlePoint.context.fillRect(0,0,500,500);
                //画笔的颜色 是红色，粗40px，字体黑体
                circlePoint.context.fillStyle="red";
                circlePoint.context.font="40px 黑体";
                circlePoint.context.fillText("Hello  Html5!",150,200,500);
                //画一个圆
                 drawCircle();
                //制作一个定时器
                circlePoint.timer=setInterval(drawCircle,20);
            }
            //画一个圆
            function drawCircle(){
                //清空
                circlePoint.context.clearRect(0,0,500,500);
                //填充 蓝色的背景
                circlePoint.context.fillStyle="#FFCC99";
                circlePoint.context.fillRect(0,0,500,500);
                circlePoint.context.fillStyle="blue";
                //定义开始画圆的路径
                circlePoint.context.beginPath();
                circlePoint.context.arc(circlePoint.x,circlePoint.y,10,0,Math.PI*2,true);                 
                circlePoint.context.closePath(); //结束
                circlePoint.context.fill(); //填充
                //坐标要变
                circlePoint.x+=2;
                circlePoint.y+=2;
                if(circlePoint.x>=500){
                    clearInterval(circlePoint.timer);
                }
            }

<canvas id="can" width="500" height="500"></canvas>


        <script>
        2、画图片
            //一个对象的方法
            function pai(){
               var  o=new Object();
               o.index=0; //下标，为了解决图片 异步加载渲染问题
               o.num=0;
               o.src="";
               return o;
            }
            var can = {
                "context": null,
                "pkLen": 4,
                "margin": 10,
                "pk": []
            };
            function $(id) {
                return document.getElementById(id);
            }
            window.onload = function() {
                loadCanvas();
                loadPk();
            };
            //1、加载数据
            function loadCanvas() {
                var a = $("can");
                can.context = a.getContext("2d");
                //填充 蓝色的背景
                can.context.fillStyle = "#FFCC99";
                can.context.fillRect(0, 0, 470, 180);
            }
            //2、随机生产PK牌
            function loadPk() {
                //要生成几张
                var pkArr = randomNumPK();
                console.log(pkArr);
                //填充PK到画布上面
                for(var i=0;i<pkArr.length;i++){
                    var pk=pkArr[i];
                    var img=new Image();
                    img.src=pk.src;
                    img.id=pk.num;  //牌号
                    img.index=pk.index;
                     //图片本身渲染异步完成后才能加载。否则空白
                     img.onload=function(){
                           console.log(this);
                            var x=10+this.index*105;
                           can.context.drawImage(this,x,10);
                     };
                }
            }
            //随机生成指定个数的不重复的1-54的打扑克对象
            function randomNumPK() {
                var rd = Math.floor(Math.random() * 100);
                //定义一个数来存储4个数字
                var nums = [];
                do {
                    if(rd >= 1 && rd <= 54) {
                        //true代表已经存了
                        var result = nums.some(function(item, index, array) {
                            return(item == rd);
                        });
                        //不存在
                        if(!result) {
                            var pkn = new pai(); //工厂方法，每一次都会被实例化一个对象
                            pkn.num = rd;
                            pkn.src = "img/" + rd + ".jpg";
                            pkn.index=nums.length;
                            nums.push(pkn);
                        }
                    }
                    //重新生成
                    rd = Math.floor(Math.random() * 100);
                } while (nums.length != can.pkLen);
                return nums;
            }
        </script>
    </head>
    <body>
        <!-- 画4 张片    105-180   =  470   -->
        <canvas id="can" width="470" height="180"> </canvas>
    </body>