• HTML5新特性


    一、HTML5新特性(视频(重点)与绘图(重点))

      html5 w3c组件 2014 推出一组网页中技术总称

      非常丰富/外观/绘图/游戏/特效/多对多聊/....

      重点:(视频/canvas绘图/webSocket)

    二、html5新特性(视频)

      基础知识

      (1)视频文件格式: .mp4 .flv .webm .ogg ...

      (2)解码器:如果浏览器播放指定格式视频需要安装

               此种格式视频对应解码器 (软件)

        a.mp4  --> 浏览器安装 mp4解码器

        解决方案:"格式工厂" x.mp4->x.flv->x.webm

      标准语法:

      <video src="视频文件路径">

       您的浏览器版本太低,请升级!

      </video>

      兼容语法

      #注意事项:准备多个视频文件

      <video>

        <source src="x.mp4"/>

        <source src="x.flv"/>

        <source src="x.webm"/>

        浏览器版本太低,请升级!

      </video>

    三、html5新特性(视频)--属性在video 元素添加

      -常见属性

       controls   显示播放视频原生控件(兼容性差)

       loop       循环播放

       muted    静音播放

       preload   预加载策略 

                     none: 不预加载任何数据

                     metadata:只预加载元数据

                     none:不预加载任何数据

                      metadata:只预加载元数据

                       (视频长时/视频第一个画面/视频高度和宽度)

                       auto:加载元数据并且加载一定时长视频(默认)

        autoplay  自动播放视频(大多数浏览器支持差)

        poster:     在播放视频之前显示一张图片(广告)

                        如果视频暂停广告不再显示

    -js常见属性方法

       #必须通过js 程序获取:"视频对象"才能执行如下属性方法

       -volume:1       音量(0~1)

       -playbackRate 回放速率(播放速度)  

                               整数:大于1快放    小于1慢播

       -play()        播放视频

       -pause()      暂停播放

       -paused      表示当前视频播放状态

                          true 表示视频暂停

                          false 表示视频正在播放

    四、html5新特性(视频)---属性在video事件

           canplaythrough    当视频加载结束后可以播放时触发事件(一次)

           duration: 视频时长(秒)

           ended           当前视频播放结束(一次)

           timeupdate   视频正在播放中(多次)  4/s

           currentTime: 当前播放时间点

    五、html5新特性(视频)--属性在video样式(重点)

    video  元素有一种样式与图片通用 object-fit

    此属性指定视频在区域内如何显示

      fill:填充   默认值:将视频拉伸操作填满整个父元素

      contain:包含   保持原有视频比例,父元素空白区域

      conver:覆盖    保持原有视频比例,宽度或高度至少有一个与父元素一致

    六、html5新特性----绘图-canvas(重点)

    #将复杂数据转换图形方开始呈现给用户.

    网页中绘图三种技术

    (1)svg       用户线段组件图形:针对2D矢量图

                     特点:矢量图可以无限放大和缩小并且不会失真

                     缺点:颜色不丰富

    (2)canvas   用像素点组件图形:针对2D位图

                       特点:位图可以不能放大和缩小并且失真,

                        缺点:颜色细腻

    (3)webgl     3D位图

    七、html5新特性--绘图---canvas-创建画布

    (1)通过标签创建画布

       <canvas id="c3"  width="500" height="400"></canvas>

       #注意事项:画布宽度和高度一定用js或者属性添加

       #不能css样式来赋值(变形)

    (2)通过js获取画布

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

    (3)通过画布获取(画笔对象---上下文对象)

       var ctx = c3.getContext("2d");

    七、html5新特性 -绘图 -canvas-矩形

    (1)绘制空心矩形(描边矩形)

    ctx.strokeRect(x,y,w,h);

    x,y      空心矩形左上角位置

    w,h    空心矩形宽度和高度

    (2)绘制实心矩形

    ctx.fillRect(x,y,w,h);

    (3)设置实心样式

    ctx.fillStyle="#f00";

    ctx.fillRect(0,0,100,80);//生效

    ctx.strokeRect(0,0,100,80);//不生效

    (4)设置空心样式

    ctx.strokeStyle="#00f";

    (5)清空矩形范围内所有元素

    ctx.clearRect(x,y,w,h);

    #清空画布中所有元素  ctx.clear(0,0,500,400);

    柱状图

    w=50;(间距/宽度)

    h=val/10;

    y=400-h;

    x=i*100+50;

    #背景颜色谨慎使用,修改方案:

    (1)给柱子添加透明度,使颜色柔和

      ctx.globalAlpha=0.3;//透明度

    (2)现成颜色组使用

    ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']

  • 相关阅读:
    数据文件对应的磁盘坏掉了,没有归档,没有备份
    Oracle OEM重建
    Verilog编码指南
    UART串口协议
    信号完整性以及串扰
    Perl-由报表转命令(展讯2015)
    论文-ShuffleNet V2: Practical Guidelines for Efficient CNN Architecture Design
    时序路径分析模式
    后端设计各种设计文件格式说明
    Verilog-小数分频器(1.5)实现(待写)
  • 原文地址:https://www.cnblogs.com/sna-ling/p/12386666.html
Copyright © 2020-2023  润新知