H5 - 瓦尔登 - 博客园

html5新特性-表单新特性

(1)新input type <input type=? />

h4:text;password;checkbox;radio;submit;reset

h5:number;email;color;date;month;week

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <form action="#">
       年龄
       <input type="number" name="age" min="5" max="90">
       <br/>
       邮箱
       <input type="email" name="myemail"/>
       <br>
       颜色
       <input type="color" name="mycolor">
       <br>
       年月日
       <input type="data" name="mydate">
       <br>
       年月
       <input type="month" name="mymonth"> 
       <br>
       年星期
       <input type="week" name="myweek">
   </form> 
</body>
</html>

inputtype

inputtype

(2)新element

h4:input;button;select;textarea;
h5:datalist;progress;meter;output.

-datalist建议列表

#默认情况下datalist不可见
- progress 进度条
<progress></progress> 左右晃动进度条
<progress value="0.5"></progress> 具有指定值进度条

setInterval+progress

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <datalist id="list3">
        <option value="九花山">九花山
        </option>
        <option value="大董">大董
        </option>
        </datalist>
        
    <input type="text" list="list3">
    <hr>
    <progress></progress>
    </progress>
    <progress value="0.1" id="p3"></progress>
<hr>
    <h3>刻度尺</h3>
    每个月的薪水
    <meter min="0" max="100000" 
    optimum="99999" value="3000" 
    low="4000" high="90000">
    </meter>
    <br>
    商品单价:￥3.5 <br />
    商品数量:<input type="number"
    name="num"/><br/>
    小计: <output>￥3.5</output>
    
    <script>
        //1:为进度条添加id
        var p3=document.getElementById("p3");
        //2:获取进度条
        //3:创建定时器1秒执行一次
        var t=setInterval(function(){        
        //3.1:获取进度条value
        var v=p3.value;
        //3.2:加0.1
        v+=0.1;
        //3.3:修改value 
        p3.value=v;
        //3.4:如果value大于1停止定时器
        if(v>1){clearInterval(t)}
        },1000);
    </script>
</body>
</html>

datails

details

-meter刻度尺(手机电池)
<meter min="最小值" max="最大值" value="当前"
low="下限" high="上限" optimum="最佳值"></meter>

-output输出
没有任何外观样式,外观 span
商品单价:￥3.5
商品数量:<input type="number" value="1" />
小计:<output>￥3.5</output>

(3)新Attr<input ?>

h4:id;class;name;style;checked;readonly;
h5:
autofocus 自动获取焦点
placeholder 占位符

form 用于把输入框放置在表单外部

multiple 允许输入多值(用逗号分隔)

验证表单有关

maxlength;minlength;max;min;required;pattern;

-maxlength;minlength 字符串最大长度
-max;min 数字最大值与最小值
- required 不能为空
-pattern 正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#">
        用户名
        <input type="text" name="uname" 
        autofocus placeholder="请输入用户名" 
        required minlength="3"
        maxlength="12">
        <br>
        电话<input type="text"
        required pattern="1[3-9]\d{9}" name="mytel">
        <input type="submit" value="提交">
    </form>
    邮箱
    <input type="email" 
    multiple name="myemail" form="f5">
</body>
</html>

attr

attr

html5新特性-(video/canvas绘图)十个特性比

html5新特性-视频--与音频--（重点）

基础知识
(1)视频文件格式
.mp4 .flv .webm .ogg .. .

(2)解码器:如果浏览器播放指定视频，
需要安装特定"解码器"
x.mp4 ->浏览器安装mp4解码器
x.flv->浏览器没有安装flv解码器结果不能播放
解决:"格式工厂" x.flv->x.mp4->x.webm->x.ogg

标准语法
<video>
<source src="x.flv" />
<source src="x.mp4" />
<source src="x.webm" />
<source src=' 'x.ogg" />
您的浏览器版本太低，请升级!!
</video>

简写:
<video src="x.mp4"></video>

html5新特性视频--(重点)-常见方法
-常见属性
controls 显示播放控件 <video controls />

-方法:js程序调用
-play(); 播放视频
-pause(); 暂停播放

-volume: 控制音量(0~1)
-playbackRate: 播放速率大于1快放小于 1慢播

-paused:true当前视频是否处理暂停状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>播放视频</h3>
    <!--屏幕宽高度与录制相关-->
    <video src="res/x.mp4" id="v3"></video>
    <button onclick="vplay()"><img src="res/play.png"></button>
    <button onclick="vpause()"><img src="res/pause.png"></button>
    <button onclick="vplay2()">快放</button>
    <button onclick="vplay3()">慢播</button>
    <button onclick="vplay4()">播放/暂停</button>
    <script>
        function vplay(){
            var v3=document.getElementById("v3");
            v3.play();
        }
        function vpause(){
            var v3=document.getElementById("v3");
            v3.pause();
        }
        function vplay2(){
            var v3=document.getElementById("v3");
            v3.playbackRate=5;
            v3.play();
        }
        function vplay3(){
            var v3=document.getElementById("v3");
            v3.playbackRate=0.3;
            v3.play();
        }
        function vplay4(){
            var v3=document.getElementById("v3");
            if(v3.paused){
                v3.play();
            }else{
                v3.pause();
            }
        }
    </script>
</body>
</html>

video

video

使用video自带controls控制,自定义控件完成视频播放和暂停功能

为视频绑定鼠标移入移出效果
鼠标移入视频区显示图片按钮res/play.png
鼠标移出视频区隐藏图片按钮res/pause.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background: #fff;
            text-align: center;
        }
        /*最外层父元素*/
        .container{
            position:relative;
        }
        #ctrl{
            position: absolute;
            left: 50%;
            top:50%;
            margin-top: -60px;
            margin-left: -60px;
        }
        #ctrl img{
            width: 120px;
            height: 120px;
        }
        #p3{
            position:absolute;
            width: 300px;
            height: 200px;
            left: 50%;
            top:50%;
            margin-left: -150px;
            margin-top: -100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!--视频 -->
        <video src="res/x.mp4" id="v3"></video>
        <!--2:广告图片-->
        <img src="res/p3.png" id="p3"/>
        <!--3:按钮-->
        <a href="#" id="ctrl">
            <img src="res/play.png"/>
        </a>
    </div>
    <script>
        //1:点击图片切换播放和暂停效果
        //2:点击图片切换图片效果
        var ctrl=document.getElementById("ctrl");
        var v3=document.getElementById("v3");
        var img=document.querySelector("#ctrl img");
        var p3=document.getElementById("p3");
        ctrl.onclick=function(e){
            e.preventDefault();
            if(v3.paused){
                img.src="res/pause.png";
                p3.style.display="none";
            v3.play();
            }else{
                img.src="res/play.png";
                p3.style.display="block";
            v3.pause();
            }
        }
        //3:鼠标移入移出
        var container=
        document.querySelector(".container");
        container.onmouseeneter=function(){
            ctrl.style.display="block";
        }
        container.onmouseleave=function(){
            ctrl.style.display="none";
        }
        //4:广告显示与隐藏

    </script>
</body>
</html>

鼠标

html5新特性--视频音频
-常见属性
controls 是否显示播放控件<video controls >

autoplay 是否自动播放<video autoplay>兼容性太差

loop 是否循环播放

muted 是否静态播放
poster 在播放视频之前是否显示广告图片
preload 预加载方式(策略)
none:不预加载任何数据
metadata:仅预加载元数据
(视频时长;视频第一个画面;视频高度宽度)

auto:预加载元数据，还加载一定时长视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video src="res/x.mp4"
    controls loop muted poster="res/p3.png"
    preload="auto" id="v3"></video>
    <script>
        var v3=document.getElementById("v3");
        v3.addEventListener("canplaythrough",function(){
            console.log("视频加载成功可以播放");
        });
        v3.addEventListener("ended",function(){
            console.log("播放结束");
        })
        v3.addEventListener("timeupdate",function(){
            console.log(v3.currentTime);
        })
    </script>
</body>
</html>

video

video

html5新特性--视频高级特性--事件
-canplaythrough 当前视频加载结束可以播放事件
duration 获取视频时长
-ended 视频播放结束触发事件
-timeupdate 视频正在播放
currentTime 当前播放时间点

html5新特性-视频高级特性-样式

video样式objec-fit
fill: 默认 "填充”将视频拉伸操作填满父元素(变形)
contain: "包含"保持原有视频尺寸，父元素留有空白区域。
conver: '覆盖"保持原有视频尺寸,宽度或高度至少有一个与父元素一致(裁切)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 160px;
            height: 160px;
            margin: 10px 0 20px;
            background-color: #b3ccee;
            overflow: hidden;
            border: 1px solid red;
            resize: both;/*规则用户可以调整元素大小*/
        }
        .box img{
            width: 100%;
            height: 100%;
            background-color: #cd0000;
        }
    </style>
</head>
<body>
    <h3>默认 fill 拉伸</h3>
    <div class="box">
        <img src="res/mm.png" 
        style="object-fit: fill;">
    </div>
    <h3>默认 container 包含 </h3>
    <div class="box">
        <img src="res/mm.png" 
        style="object-fit: contain;">
    </div>
    <h3>默认 conver 覆盖</h3>
    <div class="box">
        <img src="res/mm.png" 
        style="object-fit: cover;">
    </div>
</body>
</html>

video_css

html5新特性-音频
基础知识: x.mp3 x.wav....
<audio src="x.mp3" id="a3"></audio>
特性1:默认audio不可见，如果添加controls属性可见
特性2:属性方法事件大多数与视频相同

创建复选框实现控制背景音乐播放练习

当选中复选框播放背景音乐 a3.play()
当清空复选框暂停播放 a3.pause()
cb.change = function(){this.checked==true}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio src="res/bg.mp3" id="a3"></audio>
    是否播放音乐
    <input type="checkbox" id="c3">
    <script>
        var c3=document.getElementById("c3");
        var a3=document.getElementById("a3");
        c3.onchange=function(){
            if(this.checked){
                a3.play();
            }else{
                a3.pause();
                }
        }
    </script>
</body>
</html>

04_audio

html5新特性--在网页上绘图--(重点)

网页绘制三种技术
(1)svg: 2D矢量图用线段组成图形
特点:可以无限放大或缩小不会失真,颜色不够丰富

(2)canvas:2D位图用像素点组成图形
特点:不可以放大或缩小，颜色细腻

(3)webgl:3D位图
尚未纳入H5标准

html5新特性--在网页，上绘图--canvas
(重点-工作流程-坐标系-单词多)

-坐标系

-工作流程
(1)通过标签创建画布
<canvas id="c3" width="500" height="400"></canvas>
注意事项:画布宽度和高度只能通过js或者标签属性来赋值
但是不能使用css赋值(出现变形)
(2)通过js程序获取画布

var c3 = document.getElementByld("c3");

(3)通过画布元素获取画布中指定画笔对象[上下文对象]
var ctx = c3.getContext("2d");

#2d 平面图形

-绘制矩形
ctx.strokeRect(x,y,w,h);绘制空心矩形
x,y矩形左上角位置
w,h短形宽度和高度

ctx.strokeStyle = " #fff"; 设置空心边框样式

ctx.lineWidth = 1; 设置空心边框宽度

ctx.fillRect(x,y,w,h); 绘制实心矩形

cx.fillstyle = "#fff"; 设置实心填充样式

*ctx.clearRect(x,y,w,h); 清除一个矩形范围内所有元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{text-align: center;}
        canvas{background: #ddd;}
    </style>
</head>
<body>
    <canvas id="c3" width="500" 
    height="400"></canvas>
    <script>
        //1:获取画布
        //2:获取画笔
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        //3:空心矩形
        ctx.strokeStyle="#f00";
        ctx.lineWidth=2;
        ctx.strokeRect(250,200,100,100);
        //左上实心矩形
        ctx.fillStyle="#00f";
        ctx.fillRect(0,0,100,100);
        //清除画布
        ctx. clearRect(0,0,500,400);
    </script>
</body>
</html>

rect

绘制左右移动空心矩形
06_ rect_ exam.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{text-align: center;}
        canvas{background-color: #cccccc;}
    </style>
</head>
<body>
    <canvas id="c3" width="500" 
    height="400"></canvas>
    <script>
        //左右移动的矩形
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        //矩形x初始值位置
        var x=0;
        //创建变量表示移动方向
        //1向右  -1向左
        var xDirection=1;
        //创建定时器
        var t=setInterval(function(){
            //清除画布
            ctx.clearRect(0,0,500,400)
            //修改移动矩形
            x+=5*xDirection;
            //绘制矩形
            ctx.strokeRect(x,0,100,100);
            //如果矩形移动最右侧
            if(x>400){xDirection=-1;//向右
            }else if(x<0){//移动最左侧
                xDirection=1;//向右
            }
        },200)
    </script>
</body>
</html>

rect_exam

绘制柱状销售统计图
07_ rect_ exam.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{text-align: center;}
        canvas{background-color: #cccccc;}
    </style>
</head>
<body>
    <canvas id="c3" width="500" 
    height="400"></canvas>
    <script>
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        //销售数据
        var list=[
        {name: "北京" ,sal :290},
        {name:"天津" ,sal:210},
        {name:"石家庄" , sal:190},
        {name: "保定" , sal:210}];
        ctx.fillStyle="#e4393c";
        for(var i=0;i<list.length;i++){
            var w=50;
            var h=list[i].sal;
            var x=i*100+50;
            var y=400-h;
            ctx.fillRect(x,y,w,h);
        }
    </script>
</body>
</html>

07_rect_exam

-绘制文字(字符串)

var str = "石家庄"
ctx.font = "19px SimHei";字体与大小
ct.fillText(str,x,y); 绘制文本

ctx.textBaseline = ""; 指定文本基线
["alphabetic","top","bottom"]

str:绘制文本
x,y:文本左上角位置

html5新特性--canvas-路径(重点)

作用:路径作用绘制比较复杂图形

path:由任意多个点组成图形，图形本身不可见但是可以使用
"描边"填充"显示图形的效果

ctx.beginPath(); 开始一条新路径(上一条路径结束)
ctx.lineTo(x,y); 从当前点到指定点画一条直线

ctx.moveTo(x,y); 移动到指定点
ctx.stroke(); 描边

ctx.arc(cx,cy,r,start,end); 圆拱形
cx,cy 圆心
r 半径
start 开始角度(弧度) 角度*Math.PI/180=弧度
end 结束角度(弧度)

ctx.closePath(); 闭合一条路径(从结束点到起始点画一条直线)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{text-align: center;}
        canvas{
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <h1>01_path</h1>
    <canvas id="c3" width="500" height="400"></canvas>
    <script>
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        //创建路径
        /*ctx.beginPath();
        ctx.moveTo(250,200);
        ctx.lineTo(500,400);
        ctx.lineTo(300,300);
        ctx.lineTo(250,200);
        ctx.stroke();
         


        //圆形 
        ctx.beginPath();
        ctx.arc(250,200,50,0,180*Math.PI/180);
        ctx.stroke();
        //左上角画一个半圆
        ctx.beginPath();
        ctx.arc(50,50,50,-90*Math.PI/180,
        90*Math.PI/180) ;
        ctx.stroke( );*/
        //橙色整圆
        ctx. beginPath();
        ctx.arc( 250, 200,100,0,
        2*Math.PI);
        ctx.lineWidth=15;
        ctx.strokeStyle="#fda811";
        ctx.stroke();

    </script>
</body>
</html>

01_path

使用圆环创建动态前进进度条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{text-align: center;}
        canvas{
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <h1>01_path进度条</h1>
    <canvas id="c3" width="800" height="800">
    </canvas>
    <script>
       var c3=document.getElementById("c3");
       var ctx=c3.getContext("2d");
       //1 :绘制灰色底框1
       ctx.beginPath();
       ctx.strokeStyle="#fff";
       ctx.lineWidth=25;
       ctx.arc(250,200,100,0,2*Math.PI);
       ctx.stroke();
       //2:创建二个变量保存起始角度与结束角度
       var start=-90;
       var end=-90;
       //3:创建一个变量进度值1%
       var num=0;
       //4:创建定时器绘制进度条
       var t=setInterval(function(){
           ctx.clearRect(0,0,800,800);
        //4.1:修改结束角度
        end+=3.6;
       //4.2:开始新路径
       ctx.beginPath();
       //4.3:绘制圆环
       ctx.arc(250,200,100,start*Math.PI/180,
       end*Math.PI/180);
       ctx.strokeStyle="#0f0";
       ctx.stroke();
       ctx.font="30px SimHei";
       num++;
       ctx.fillText(num+"%",215,190);
        //停止计时器
        if(num>=100){ 
            clearInterval(t);
        }
       },200);
    </script>
</body>
</html>

02_path

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
        text-align:center
    }
    canvas{
        background-color:#ccc;
    }
    </style>
</head>
<body>
    <canvas id="c3"width="500" height="400"></canvas>
    <script>
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        //1:绘制外围轮廓
        ctx.beginPath();
        ctx.arc(250,200,100,30*Math.PI/180,
        330*Math.PI/180);
        ctx.lineTo(250,200);
        ctx.closePath();
        ctx.stroke();
        //2:蓝色眼球
        ctx.beginPath();
        ctx.arc(270,155,25,0,2*Math.PI);
        ctx.fillStyle="#00f";
        ctx.fill();
        ctx.stroke();
        //3:白色眼神
        ctx.beginPath();
        ctx.arc(275,145,5,0,2*Math.PI);
        ctx.fillStyle="#fff"
        ctx.fill();
    </script>
</body>
</html>

03_path

html5新特性--canvas-图片(重点)

图片在软件项目中放在哪里?服务器指定目录中
原因
(1)图片有版权
(2)图片数量巨大

-开发流程序
(1)创建图片对象 var p3 = new Ilmage();
(2)下载指定图片 p3.src= "x.png"
(3)为图片绑定下载完成事件 p3.onload = function(){}
(4)将事件绑定函数中绘制图片
ctx.drawlmage(p3,x,y); x,y左上角位置(原始大小图片)
ctx.drawlmage(p3,x,y,w,h); w,h 宽和高(拉伸)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="c3" width="500" height="400"></canvas>
    <script>
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        //1:创建图片对象
        var p3=new Image();
        //2:下载图片
        p3.src="res/p3.png";
        //3:绑定下载成功事件
        p3.onload=function(){
          //4:绘制图片
          ctx.drawImage(p3,0,0);
          ctx.drawImage(p3,250,200,300,150);
            //练习: 上下移动小飞机
            //y代表小飞机坐标
            var y=0;
            //代表方向1向下-1向上
            var yDirection = 1;
            var x=0;
            //1向左  -1向右
            var xDirection=1;
            var t = setInterval(function(){
                ctx.clearRect(0,0,500,400);
                //修改y坐标
                y+=2*yDirection;
                x+=2*xDirection;
                //绘制图片
                ctx.drawImage(p3,x,y);
                if(x>300){
                    xDirection=-1;
                }else if(x<1){
                    xDirection=1;
                }
                //如果图片移动最下方
                if(y>300){
                    //改变方法
                    yDirection=-1;
                }else if(y<1){
                    yDirection=1;
                }
            }, 50);
        }
        

    </script>
</body>
</html>

img

绘制随鼠标移动而移动小飞机

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="c3" width="500" height="400"></canvas>
    <script>
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        //绘制随鼠标移动而移动小飞机
        //1:创建图片对象下载图片
        var p3=new Image();
        p3.src="res/p3.png"
        //2:为图片绑定下载成功事件
        p3.onload=function(){
        //2.1:为画布绑定鼠标事件
        //mous emove
        c3.onmousemove=function(e){
            ctx.clearRect(0,0,500,400);
        //2.2:获取鼠标位置Xy
        var mx=e.offsetX;
        var my=e.offsetY;
        //2.3:将鼠标x, y赋值图片x,y
        ctx.drawImage(p3,mx,my);
        }
        }
    </script>
</body>
</html>

04_img

html5新特性--canvas-变形(重点)

canvas 绘图技术针对图像在绘制过程中进行变形(旋转)操作

-rotate(弧度)
#旋转针对画笔对象,旋转轴心默认在画布原点上
#旋转角度会累加效果

绘制不停旋转小飞机
定时器+旋转+绘制小飞机
-translate(x,y);将画布轴点(原点)移到指定位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="c3" width="500" height="400"></canvas>
    <script>
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        var p3=new Image();
        p3.src="res/p3.png";
        ctx.translate(250,200);
        p3.onload=function(){
            var t=setInterval(function(){
                ctx.clearRect(0,0,500,400);
                ctx.rotate(10*Math.PI/180);
                ctx.drawImage(p3,0-100,0-50);
            },100)
        }
    </script>
</body>
</html>

05_img

-save()
保存状态
-restore()恢复画笔状态

创建二架小飞机,飞机1，飞机2
飞机2旋转速是是飞机1,2倍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="c3" width="500" height="400"></canvas>
    <script>
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        //1:创建图片对象下载图片
        var p3=new Image();
        p3.src="res/p3.png";
        //负责保存小飞机1旋转角度
        var deg1=0;
        //负责保存小飞机2的旋转角度
        var deg2=0;
        p3.onload=function(){
        //2:绑定下载成功事件
        //2.1:创建定时器
        var t=setInterval(function(){
        //2.2:保存状态
        ctx.save();
        //2.3:移动轴心
        ctx.translate(100,100);
        //2.4:旋转10
        deg1+=10; 
        ctx.rotate(deg1*Math.PI/180);
        //2.5:绘制小飞机1
        ctx.drawImage(p3,0-100,0-50);
        //2.6:恢复
        ctx.restore();
            
            //第二架小飞机
            //1:创建变量保存旋转角度
            //2:保存状态
            ctx.save();
            //3:累加旋转角度20
            deg2+=20;
            //4:移动轴心
            ctx.translate(350,100);
            //5:旋转
            ctx.rotate(deg2*Math.PI/180);
            //6:绘制第二架小飞机
            ctx.drawImage(p3,0-100,0-50);
            //7 :恢复状态
            ctx.restore();
        },100)
            }
    </script>
</body>
</html>

06_img_exam

手册:
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_ APl

html5新特性--canvas-变形(渐变对象)--了解

渐变对象:是一种图像效果从一种颜色慢慢过渡另一种颜色
(1)创建渐变对象

var g = ctx.createLinearGradient(x1,y1,x2,y2);
x1,y1起点坐标
x2,y2终点坐标

(2)添加颜色点

g.addColorStop(offset,color);

(3)将渐变对象赋值填充样式或者描边样式

ctx.fillStyle= g;
ctx.strokeStyle= g;
(4)绘图
ctx.fillRect(0,0,500,100);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="c3" width="500" height="400"></canvas>
    <script>
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        //1:创建渐变对象
        var g=ctx.createLinearGradient(0,0,500,0);
        //2:添加三个颜色点
        g.addColorStop(0,"#f00");
        g.addColorStop(0.5,"#0f0");
        g.addColorStop(1,"#ff0");
        //3 :将渐变对象赋值填充样式
        ctx.fillStyle=g;
        ctx.strokeStyle=g;
        //4:将渐变对象赋值空心样式
        //5:创建实心矩形
        ctx.fillRect(0,0,500,100);
        //6:创建空心文字
        ctx.font="39px SimHei";
        ctx.strokeText("js",250,200);
    </script>
</body>
</html>

08_linear

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            text-align: center;
        }
        canvas{
            background: #ccc;
        }
    </style>
</head>
<body>
    <h1>销售统计图</h1>
    <canvas id="c3" width="800" height="600"></canvas>
    <script>
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        var list=[
            {name:"北京",s:3000},
            {name:"上海",s:3100},
        ]
        var gs=[];
        gs[0]=ctx.createLinearGradient(0,0,0,600);
        gs[0].addColorStop(0,"#f00");
        gs[0].addColorStop(1,"#fff");
        gs[1]=ctx.createLinearGradient(0,0,0,600);
        gs[1].addColorStop(0,"#0f0");
        gs[1].addColorStop(1,"#fff");
        for(var i=0;i<list.length;i++){
            var w=50;
            var h=list[i].s/10;
            var y=600-h;
            var x=i*100+50;
            ctx.fillStyle=gs[i];
            ctx.fillRect(x,y,w,h);
            var txtX=x;
            var txtY=y-20;
            ctx.font="29px SimHei";
            ctx.fillText(list[i].name,txtX,txtY);
        }
        //文字
        //创建2个渐变对象
    </script>
</body>
</html>

统计图

html5新特性---svg（了解）

	canvas	svg
绘制图像类型	2D位图	2D矢量图
如何绘制	使用js代码绘图	标签绘图
事件绑定	只能将事件绑定画布	每个图形都可以绑定
应用场景	网页特效；游戏	地图

#svg图形属性可以通过css设置-开发流程
(1)创建画布
<svg id="s3" width="500" height-="400'"...</svg>
(2)向画布添加元素
<circle cx="" cy="" r="" fill="" stroke="" fllopacity=""
stroke-opacity=""></circle>

svg特性:

1:svg图形中属性是可以通过css设置

2:svg动态创建元素

(1)html字符串拼接

var html = "<circle></circle>";

svg.innerHTML = html;

(2)svg创建对象方法

var c = document.createElementNS("svg标准地址:" ,"标签");

svg地址:http://www.w3.org/2000/svg

标签:circle

c.setAttribute("r",100); //不能这样写 C.r = 100;

var r = c.getAttribute("r");

svg.appendChild(c);

在画布上创建30个圆形要求大小，位置，颜色，透明度随机

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            text-align: center;
        }
        svg{
            background:#ccc ;
        }
    </style>
</head>
<body>
    <svg id="s3" width="500" height="400"></svg>
    <script>
        var s3=document.getElementById("s3");
        //1:创建循环30
        for(var i=0;i<=30;i++){
        //2:创建元素
        var c=document.createElementNS
        ("http://www.w3.org/2000/svg",
        "circle");
        //3:设置半径?
        var r=Math.random()*20+5;
        c.setAttribute("r",r);
        c.setAttribute("cx",Math.random()*500);
        c.setAttribute("cy",Math.random()*400);
        //4:设置填充?
        var r=Math.random()*255;
        var g=Math.random()*255;
        var b=Math.random()*255;
        var c1=`rgb(${r},${g},${b})`;
        c.setAttribute("fill",c1);
        //5:设置透明度?
        c.setAttribute("fill-opacity",
        Math.random());
        //6:将元素追加画布
        s3.appendChild(c);
        }
    </script>
</body>
</html>

03_svg

当点击某个圆时它会慢慢变大变淡最后消失,最后删除此元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            text-align: center;
        }
        svg{
            background:#ccc ;
        }
    </style>
</head>
<body>
    <svg id="s3" width="500" height="400"></svg>
    <script>
        var s3=document.getElementById("s3");
        //1:创建循环30
        for(var i=0;i<=30;i++){
        //2:创建元素
        var c=document.createElementNS
        ("http://www.w3.org/2000/svg",
        "circle");
        //3:设置半径?
        var r=Math.random()*20+5;
        c.setAttribute("r",r);
        c.setAttribute("cx",Math.random()*500);
        c.setAttribute("cy",Math.random()*400);
        //4:设置填充?
        var r=Math.random()*255;
        var g=Math.random()*255;
        var b=Math.random()*255;
        var c1=`rgb(${r},${g},${b})`;
        c.setAttribute("fill",c1);
        //5:设置透明度?
        c.setAttribute("fill-opacity",
        Math.random());
        //6:将元素追加画布
        s3.appendChild(c);
        //7:为元素绑定点击事件
        c.onclick=function(){
            //防止当前元素再次被点击当前元只能点击一次
            this.onclick=null;
            var t=setInterval(()=>{
                //7.1:元素半径增加
                var r=this.getAttribute("r");
                r*=1.05;
                this.setAttribute("r",r);
                //7.2:元素透明度减少
                var p=this.getAttribute("fill-opacity");
                p*=0.9;
                this.setAttribute("fill-opacity",p)
                //7.3:删除
                if(p<0.05){
                    clearInterval(t);
                    s3.removeChild(this);
                }
            },50)
        }
        }
    </script>
</body>
</html>

03_svg

html5新特性--svg--直线

<line x1 y1 x2 y2 stroke=" stroke-width=" stroke-linecap="*></line>
stroke 描边样式
stroke-width 线宽度
stroke-linecap 边线顶端样式 round
汉堡包图标/五角星

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            text-align: center;
        }
        svg{
            background-color: #ccc;
        }
    </style>
</head>
<body>
   <svg id="s3" width="500" height="400">
     <g stroke-width="5" 
     stroke-linecap="round"
     stroke="#000">
     <!--group 小组-->
     <line x1="250" y1="200" 
        x2="251" y2="200">
    </line>
    <line x1="259" y1="200" 
    x2="280" y2="200"></line>

    <line x1="250" y1="210" 
    x2="251" y2="210">
    </line>
    <line x1="259" y1="210" 
    x2="280" y2="210"></line>

    <line x1="250" y1="220" 
    x2="251" y2="220">
    </line>
    <line x1="259" y1="220" 
    x2="280" y2="220"></line>
    </g>
    <!--五角星-->
    <line x1="100" y1="100" 
    x2="150" y2="100" stroke="#000"></line>
    <line x1="150" y1="100" 
    x2="105" y2="150" stroke="#000"></line>
    <line x1="105" y1="150" 
    x2="125" y2="70" stroke="#000"></line>
    <line x1="125" y1="70" 
    x2="135" y2="150" stroke="#000"></line>
    <line x1="135" y1="150" 
    x2="100" y2="100" stroke="#000"></line>
    </svg>
</body>
</html>

04_svg

html5新特性--SVg--折线

一条折线上可以有任意多个连续点(x,y)
<polyline points="x,y X,Y x,y ..." stroke=""></polyline>

3.4:html5新特性--svg--文本/图像
<text font-size="" fll="" stroke=" x="" y="">文本内容</text>

单独的标签 <span></span>不行
<image xlink:href="x.jpg" x="" y=""></image>

x:y元素左上角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
           text-align: center;
        }
        svg{
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <svg id="s3" width="500" height="400">
    <polyline 
    points="50,50 100,50 100,100 50,50"
    stroke="#f00" fill-opacity="0"></polyline>
    <text font-size="19" fill="blue" 
    x="250" y="200">卡西欧</text>
    
    <image xlink:href="res/p5.png" 
    x="0" y="0"></image>
</svg>
</body>
</html>

05_svg

html5新特性-Vg--渐变对象--(一种特效)

<defs>定义特效对象
<linearGradient id="g3" x1=""y1=" x2="y2=">
<stop offset="偏移量" stop-color="" />

...
</linearGradient>
</defs>

#x1 y1
起点坐标 0% 100%
#x2 y2 终点坐标
#offset颜色点位置30%

<ANY fill="url(#g3)" stroke="url(#g3)"></ANY>
#ANY任意标签line;text;cirele;....

3.6:html5新特性--svg-滤镜--(一种特效)高斯模糊滤镜

<defs>
<filter id="f3">
<feGaussianBlur stdDeviation="数字" />
</filter>
</defs>
#数字:模糊度级别0~10 7看不清
<ANY filter="url(#g3)"></ANY>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            text-align: center;
        }
        svg{
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <svg id="s3" width="500" height="400">
        <defs>
            <!--创建渐变对象-->
            <linearGradient id="g3"
            x1="0%" y1="0%" x2="100%"
            y2="0%">
        <stop offset="0%"
        stop-color="red"></stop>
        <stop offset="100%"
        stop-color="#ff0"></stop>
    </linearGradient>
            <!--创建滤镜-->
            <filter id="f3">
                <feGaussianBlur stdDeviation="5">
                </feGaussianBlur>
            </filter>
        </defs>
        <text font-size="30" 
        x="20" y="100" fill="url(#g3)">javascript</text>
        <text font-size="30" 
        x="20" y="200" filter="url(#f3)">javascript</text>
    </svg>
</body>
</html>

06_svg

html5新特性- echarts-百度第三方绘图库--(重点)

-d3.js 国外公司

-echarts 百度https://www.echartsjs.com

#为什么要使用第三方绘图库
-绘图库提供非常复杂图形
-降低绘图难度

html5新特性--echarts-百度第三方绘图库--(重点)

(1)下载echarts库文件

https://www.echartsjs.com/ download.html

(2)创建容器

(3)将echarts库引入网页中

(4)获取容器并且创建echarts对象 js

var main = document.getElementByld(" main");
var mychart = echarts.init(main);

(5)创建配置项

var option={

title:{text:"echarts 入门示例" } #顶部标题

xAixs:{data:["衬衫","袜子","裤子", "雪纺衫"]}， #x轴数据

yAixs:{}， #y轴数据

series:[{type:"bar",data:[10,10,11,13]}] #数据源

}

type:"bar"指绘图像的类型 bar line pie....

(6)将配置项添加echarts 对象即可

mychart.setOption(option)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="资源/echarts.min.js"></script>
</head>
<body>
    <div id="main" 
    style="width:500px;height:400px"></div>
    <script>
        //获取容器
        var main=document.getElementById("main");
        //创建mychart对象
        var mychart=echarts.init(main); 
        //创建配置项目
        var option={
            title:{text:"示例一"},
            xAxis:{data:["衬衫","袜子","裤子","雪纺衫"]},
            yAxis:{},
            series:[{type:"bar",data:[10,10,11,13]}] 
            }
        //将配置添加mychart
        mychart.setOption(option);
    </script>
    
</body>
</html>

echart

示例：销售统计

{name:"冰箱",val:190},
{name:"电视" ,val:19},
{name:"洗衣机" ,val:390},
{name:"空调",val:90},

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="资源/echarts.min.js"></script>
</head>
<body>
    <div id="main" 
    style="height:600px;width:800px;"></div>
    <div id="box" 
    style="height:400px;width:500px;
    border: 1px solid red;"></div>
    <script>
        //*0:销售数据
        var list=[
        {name:"冰箱",val:190},
        {name:"电视",val:19},
        {name:"洗衣机",val:390},
        {name:"空调",val:90},
        ];
        //x轴数据
        var names=[];
        //数据源数据
        var vals=[];
        for(var item of list){
            names.push(item.name);
            vals.push(item.val);
        }
        //*1:获取容器并且创建echarts对象
        var main=
        document.getElementById("main");
        var mychart=echarts.init(main);
        //2:创建option
        var option={
            title:{text:"销售统计图"},
            xAxis:{data:names},
            yAxis:{},
            series:[{type:"bar",data:vals}]
        };
        //3 :将option添加echarts
        mychart.setOption(option);
        //echarts 折线图
        //1:获取容器并且创建对象
        var box=document.getElementById("box");
        var boxchart=echarts.init(box);
        //2:创建配置项
        var boxoption={
            title:{text:"折线图"},
            xAxis:{data:names},
            yAxis:{},
            series:[{type:"line",data:vals,smooth:true}]
        }
        //3:将配置项添加
        boxchart.setOption(boxoption);
    </script>
</body>
</html>

08_echart

html5新特性--echarts-饼状图

{type:"pie",radius:"半径",center:["x","y"],data:{value:12,name:"a"}]}

html5新特性--echarts-仪表图

var option={
series:[{type:"gauge" ,
detail:{formatter:"{value}%"}, //显示进度{32}%
data:[{value:32,name:"完成率"}]}]
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="资源/echarts.min.js"></script>
</head>
<body>
    <div id="main" 
    style="width:500px; height:400px;"></div>
    <div id="box" style="width: 500px; height: 400px;border:1px solid blue"></div>
    <script>
        //1:获取容器并且创建对象
        var main=document.getElementById("main");
        var mychart=echarts.init(main);
        //2:创建option
        var option={
            title:{text:"饼状统计图"},
            series:[
                {type:"pie",
                radius:"50%",
                center:["50%","50%"],
                //元素样式
                itemStyle:{
                    normal:{
                        color:"#c23531",
                        shadowBlur:200,//阴影
                        shadowColor:'rgba(0,0,0,0.5)'
                    }
                },
                data:[{value:100,name:"js"},
                {value:99,name:"php"},
                {value:101,name:"java"}]
                }]
            }
        //3 :将option添加对象
        mychart.setOption(option);

        var box=document.getElementById("box");
        var boxchart=echarts.init(box);
        var boxoption={
            series:[{
                name:"业务指标",
                type:"gauge",
                detail:{formatter:"{value}%"},
                data:[{value:35,name:"完成率"}]
            }]
        };
        boxchart.setOption(boxoption);
    </script>
    
</body>
</html>

gauge

html5新特性-拖放API

在网页实现拖放效果 Drag&Drop 拖动和释放

-拖动源对象(会动)-触发三个事件
dragstart 拖动开始
drag 拖动中
dragend 拖动结束
整个过程:dragstart* 1+drag* n+dragend*1
-拖动目标对象(不会动)-触发四个事件
dragenter 拖动进入
dragover 拖动悬停
dragleave 拖动离开
drop 释放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="res/trash.png" id="p3">
    <hr>
    <img src="res/p3.png" id="p3">
    <script>
        //分析拖动源对象三个事件操作
        var p3=document.getElementById("p3");
        //1:拖动开始
        p3.ondragstart=function(){}
        //2:拖动中
        p3.ondrag=function(){}
        //3:拖动结束
        p3.ondragend=function(){}
        var trash=document.getElementById("trash");
        trash.ondragenter=function(){}
        trash.ondragover=function(e){
            //有默认行为无法执行ondrop，所以阻止默认行为
            e.preventDefault();
        }
        trash.ondragleave=function(){}
        trash.ondrop=function(){}
    </script>
</body>
</html>

02_drop

使用拖动提供7个事件实现拖动删除效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="res/trash.png"id="trash">
    <hr>
    <div class="container">
        <img src="res/p3.png" id="p3">
        <img src="res/p4.png" id="p4">
        <img src="res/p5.png" id="p5">
    </div>
    <script>
        //1:获取所有元素
        var trash=document.getElementById("trash");
        var list=document.querySelectorAll
        (".container img");
        //2:创建全局变量pid
        var pid=-1;
        //3:为源对象绑定拖动开始事件
        for(var item of list){
            item.ondragstart=function(){
                pid=this.id;
            }
            item.ondrag=function(){}
            item.ondragend=function(){}
        }
        //4:将当前小飞机id保存pid中
        trash.ondragover=function(e){
            e.preventDefault();
        }
        //5:any回收站绑定释放事件
        trash.ondrop=function(){
        //6:依据pid获取小飞机并且删除(pid是变量，所以没加双引号)
        var p=document.getElementById(pid);
        p.remove();
        }
    </script>
</body>
</html>

02_drop_exam

html5新特性-Web Worker（了解）

-原理多 3行代码

程序:指可以被CPU执行代码，代码通常存储在磁盘上
1.html 1.css 1.js

进程:将程序(代码)调入内存中执行(在内存中代码称为进程)
线程:线程是进程内部组件部分

chrome浏览器线程模型
一个chrome进程内部至少7个线程:
-其中有一个线程负责所有资源绘制并且负责执行js(UI主线程)
-至少有6个线程负责向服务器发送请求获取资源(请求线程)

<button>按钮一-</button>
<script src="1.js"></script>
<button>按钮二</button>
问题:如果1.js执行时间非常长，网页出现停止现象(空白)

解决方案:创建一个新线程(Worker)让它执行耗时jis 任务，
UI主线只负责绘制二个按钮

<button>按钮一</button>
<script>
new Worker("res/03.js");
#创建Worker对象
#创建新线程Worker执行03.js
</script>
<button>按钮二</button>

#注意事项:浏览器不允许Worker线程执行js程序中出现
任何DOM/BOM内容
#原因:浏览器开发者认为多个线程同时绘制网页容易出现
混乱现象..

总结:WebWorker新线程用于执行耗时js任务,提高网页效率
js任务不能有DOM/BOM如果jquery.js不行

2.5:html5新特性-数据传递
Worker(03.js)传递数据 Ul(html) 线程
-Worker(03.js)发送
postMessage(strmsg); //发送执行完毕几个字
-Ul(html) 接收
var w = new Worker("res/03.js");
w.onmessage = function(e){e.data}//执行完毕

Ul(html)传递数据Worker(03.js) 线程
-Ul(html) 发送
w. postMessage(stringMsg)
-Worker 接收
onmessage = function(e){e.data}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮一</button>
    <!--03.js 5秒
    <script src="03.js"></script>-->
    <script>
        //创建worker线程
        var w=new Worker("res/03.js");
        w.onmessage=function(e){
            var m=e.data;
            var msg=document.getElementById("msg");
            msg.innerHTML=m;
        }
        w.postMessage(7000);
    </script>
    <button>按钮二</button>
    <div id="msg"></div>
</body>
</html>

worker

//接受ui线程传递的数据
onmessage=function(e){
    var end=parseInt(e.data);
    //1:创建开始时间
var start=new Date().getTime();
//2:创建循环，创建结束时间
do{
//3:判断条件:如果结束时间-开始时间
var end1=new Date().getTime();
//<5000继续循环
}while(end1-start<end);
postMessage("执行完毕");
}
//小技巧：让程序执行5秒钟

03.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input placeholder="请输入数值" id="num1">
    <br>
    <button id="btn">计算</button>
    <hr>
    结果
    <div id="msg"></div>
    <script>
        //1:获取按钮并且绑定事件
        var btn=document.getElementById("btn");
        btn.onclick=function(){
        //2:获取用户输入数据
        var num1=document.getElementById("num1");
        var n=num1.value;
        //3:创建Worker线程完成累加计算
        var w=new Worker("04.js");
        //4:将用户输入数据发送Worker
        w.postMessage(n);
        w.onmessage=function(e){
            var rs=e.data;
            var msg=document.getElementById("msg");
            msg.innerHTML=rs;
        }
        //5:接收Worker计算结果并且显示
        }
    </script>
</body>
</html>

04.html

//1:接收UI传递数值
onmessage=function(e){
//2:计算累加和
var n=e.data;
//累加和
var sum=0;
for(var i=1;i<=n;i++){
    sum+=i;
}
//3:将结果发送04.html
postMessage(sum);
    }

04.js

html5新特性-Web Storage

在客户端浏览器中存储用户专用数据
示例:用户昵称;购物车

-客户端存储数据种类

(1)cookie	适用范围广	操作复杂	2KB
(2)webStorage	新	操作简单	8MB
(3)flash	依赖flash播放器	使用较少
(4)indexDB	新	操作简单	没上限

-webStorage两个对象
(1)sessionStorage 当前会话中多个网页可以共享数据

setltem(key,value); 保存数据 key键 value值

var value = getltem(key); 获取数据value
removeltem(key); 删除一组数据
clear(); 清空所有数据
var key = key(i); 获取key
length 数据个数

(2)localStorage 保存数据永久

setltem(key,value); 保存数据 key键 value值

var value = getltem(key); 获取数据value
removeltem(key); 删除一组数据
clear(); 清空所有数据
var key = key(i); 获取key
length 数据个数

#客户端保存数据要求:安全性差可以

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>05.html--存储</h3>
    <a href="06.html">获取</a>
    <script>
        sessionStorage.setItem("name","红");
        sessionStorage.setItem("age",23);
        localStorage.setItem("name1","绿");
        localStorage.setItem("age1",12);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>06.html</h3>
    <script>
        var n=sessionStorage.getItem("name");
        var age=sessionStorage.getItem("age");
        console.log(n+":"+age);
        console.log(sessionStorage.length);
        console.log(sessionStorage.key(0));
        //sessionStorage.removeItem("age");
        console.log(localStorage.setItem("name1"));
        console.log(localStorage.getItem("age"));
    </script>
</body>
</html>

示例：模拟登录与退出

index.html创建首页并且在右上角添加超链接"请登录"
当用点击链接时跳转login.html
login.html创建表单请用户填写用户名和密码
点击提交:提示3s 秒后跳转首页
setTimeout+location.href

sessionStorage.setltem("uname","tom");
index.html右上角"欢迎回来:tom 退出"

logout.html提示:您己退出3s后跳转index.html
index. htm|首页右上"请登录"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #msg{
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="msg">
        <a href="login.html">请登录</a>
    </div>
    <script>
        var n=sessionStorage.getItem("uname");
        if(n){
            var str=`欢迎回来${n}`;
            str+=`<a href="logout.html">退出</a>`;
            var msg=document.getElementById("msg");
            msg.innerHTML=str;
        }
    </script>
</body>
</html>

index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#">
        用户名：
        <input type="text" id="uname">
        <br>
        密码：
        <input type="password" id="upwd">
        <br>
        <input type="button" value="登录" 
        id="btn">
    </form>
    <script>
        //1:获取按钮并且绑定点击事件
        var btn=document.getElementById("btn");
        btn.onclick=function(){
        //2:获取用户保存在:sessionStorage
        var uname=document.getElementById("uname");
        //保存用户名
        sessionStorage.setItem("uname",uname.value);
        //3 :跳转index. html
        alert("3秒后跳转首页");
        setTimeout(function(){
            location.href="index.html"
        },3000);
            }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //清除登录条件
        sessionStorage.removeItem("uname");
        alert("您己退出 3s后跳转首页");
        setTimeout(function(){
            location.href="index.html"
        },3000);
    </script>
</body>
</html>

logout

示例：
(1)创建销售数据表
t_ sal[id:1,m:1,sal:10.0...] 12行
(2)创建服务器程序app.js
接收get("/sal")将数据库销售表数据返回
(3)homework. html
1:发送ajax请求原生ajax

2:依据返回数据创建销售统计图echarts 柱状态

html5 webSocket协议--原理(代码4行)

(1)http 协议
http协议:超文本传输协议
http协议:传输网页资源(htm/css/img/avi/m3/...)
网页内容搬运工

http://127.0.0.1:3000/index.html
http协议工作方式:请求和响应
#必须是客户端发起请求服务器端才会有响应数据
#而且一次请求只能获取一次响应数据
问题:有一些应用场景下此协议不适合

金融股票行业:[股票走势图]多长时间发送一次请求
?5分钟
? 10ms
解决问题:webSocket协议
webSocket协议工作方式:广播和收听

客户端连接到服务器上就不再断开双方都可以随时向对方发送数据

webSocket适用场景:股票走势图/群聊

html5 webSocket服务器提供现成

html5 webSocket客户端 4行代码

-创建webSocket对象
var c = new WebSocket("ws://127.0.0.1:9001");
WS 协议名称
127.0.0.1服务器在本地电脑上
9001 服务器默认工作端口

_接收服务器发送数据.
c.onmessage = function(e){e.data}
-发送数据给服务器
c.send(stringMsg);
-关闭连续

c.close();

3.4:html5游戏(大鱼和小鱼)--重点-功能分析
-蓝色大海
-紫色海葵左右摆动
-海葵头顶位置出生食物
-食物蓝色(多)100橙色(少) 200
-大鱼负责吃食物
-小鱼跟着大鱼
-大鱼负责喂小鱼

3.5:html5游戏(大鱼和小鱼)--重点-目录
game--游戏目录
src--所有游戏中使用图片
js--所有js文件

index.html--唯一个网页

3.5:html5游戏(大鱼和小鱼)--功能一:背景 index.html

-创建画布标签
画布一:(前)大鱼小鱼分数 z-index:1
画布二:(后)背景海葵食物 z-index:0
-为画布设置样式

-游戏程序设计:-一个角色一个文件
-创建js game/js/background.js
-创建drawBackground() 绘制背景图片

-main.js

作用：创建游戏所有全局变量

创建所有游戏中角色对象
绘制游戏角色

-requestAnimationFrame(gameloop);
以前定时器不适合创建动画效果智能定时器
定时器不停计算当前浏览器效率，得出最佳间隔时间
setInterval(fn,200); 固定时间 200ms 20ms.
固定时间 300ms 200ms

3.6:html5游戏(大鱼和小鱼)功能二:海葵版本- -(静态)
-创建文件ane.js
实现海葵依靠直线路径lineTo()
-一共50根海葵

-海葵间距16 800/50

-海葵高度200 50 随机

2.3:html5游戏(大鱼和小鱼)功能二:海葵版本二(动态)

功能分析:摆动海葵
解决方案:使用曲线替换直线完成海葵绘制
贝赛尔曲线:

p0:起点坐标
p2:终点坐标
p1:控制点
曲线:从p0开始经过p1控制点最后绘制p2终点这样一条曲线贝赛尔曲线

初始化:起点坐标控制点坐标终点坐标一致.
摆动:终点发生变化 -20 +20

moveTo(起点坐标x,起点坐标y)
quadraticCurveTo(控制点x,控制点y,终点x,终点y);

右向100+1 +2 +3 +4 +5..+20
左向100-1-2-3-4-5 ..-20
解决方案:正弦函数返回值-1~1
var p = Math.sin(非常小小数0.00032); p(-1~1)

2.4:html5游戏(大鱼和小鱼)功能二:食物第一个版本
(1)30个食物其中蓝色居多橙色很少fruit.png blue.png
(2)同一个时刻15个食物显示15个隐藏
(3)食物行为:

出生:在海葵终点坐标位置出生
宽度+高度: 0~14
向上漂浮:y- spd

(4)食物漂浮出屏幕隐藏
(5)食物被大鱼吃了隐藏

2.5:html5游戏(大鱼和小鱼)功能三:大鱼
(1)画布
can1:大鱼/分数/...
can2:背景/海葵/食物
(2)大鱼多张图片组件

眼睛:bigEye0.png .. bigEye1.png 二张眼睛图片
身体:bigSwim0.png .. bigSwim7.png 八张身体图片
尾巴:bigTail0.png ... bigTail7.png 八张尾巴图片

(3)大鱼行为
大鱼吃食物
大鱼跟鼠标游动
大鱼吃食物得分蓝色食物100 橙色200分

2.1:大鱼/大鱼吃食物/分数
2.2:大鱼吃食物
如果大鱼位置与食物位置非常接近表示大鱼吃到食物
如果食物消失
问题:大鱼与食物距离

collsion.js完成大鱼与食物[碰撞检测]

2.3:分数
分数字符串我们将分数画在画布底端
1:吃蓝色食物100分
2:吃橙色食物200分

食物类型fruitType "blue",," orange"

3.:html5地理定位(小程序定位服务器腾讯地图)

示例：拖放上传图片功能-针对PC端需要的功能

posted on 2020-07-04 00:15 瓦尔登阅读(376) 评论(0) 编辑收藏举报