HTML5新特性基础学习笔记上

来源：互联网发布：linux 删除海量小文件编辑：程序博客网时间：2024/05/29 17:21

1.HTML5音频视频

音频播放
1.Audio(音频)
HTML5提供了播放音频文件的标准
2.control(控制器)
control属性供添加播放,暂停和音量控件
3.标签:
<audio> 定义声音

<source> 规定多媒体资源,可以是多

<button onclick="clickA()">播放/暂停</button>    <!--   <audio id="audio" src="周杰伦%20-%20彩虹.mp3"  controls="controls" autoplay="autoplay">浏览器不支持的时候显示</audio>-->  <audio id="audio" src="http://qzone.haoduoge.com/music3/2015-02-03/1422957966.mp3"  >浏览器不支持的时候显示</audio>    <script>        var a =document.getElementById("audio");        function clickA(){            if(a.paused){                a.play()            }else{                a.pause();            }        }    </script>

视频播放
1.Video(视频)
HTML5提供了展示视频的标准
2.control(控制器)
control属性提供添加播放,暂停和音量控件
3.标签
<video> 定义声音
<source> 规定多媒体资源,可以是多个
4.属性:
width:宽
height:高

 <button onclick="clickV()" >播放/暂停</button>    <button onclick="big()" >放大</button>   <!-- controls="controls"决定有没默认控制框  不写就没--><video id="video" controls="controls" >浏览器不支持<!--火狐不支持.MP4-->    <source src="1.mp4">    <source src="1.ogg"></video>    <script>        var v = document.getElementById("video");//写在head不行?要写在对象后面..        function clickV(){            if(v.paused){                v.play()            }else{                v.pause();            }        }        function big(){            v.width=800;            v.height = 800;        }    </script>

2.HTML5拖放

HTML5拖放
1.HTML拖放:
拖放(Drag和drop)是HTML5标准的组成部分
2.拖动开始
ondragstart:调用了一个函数,drag(event),它规定了被拖放的数据
3.设置拖放数据
setData():设置被拖数据的数据类型和值
4.放入位置:
ondragover:事件规定在何处放置被拖动的数据
5.放置
ondrop:当放置被拖数据时,会发生drop事件

<div id="box1" class="box"></div><div id="box2" class="box"></div><img src="1.png" id="img1"><img src="5.png" id="img2"><div id="msg"></div>

<style>        .box{            width: 400px;            height: 400px;        }        #box1 {            float: left;            background-color: gray;        }        #box2{            float: left;            background-color: yellow;         }    </style>

var box1Div, box2Div;var msgDiv;var img1,img2;window.onload = function () {    box1Div = document.getElementById("box1");    msgDiv = document.getElementById("msg");    img1 = document.getElementById("img1");    img2 = document.getElementById("img2");    box2Div = document.getElementById("box2");    /*  box1Div.ondragenter = function (e) {     showObj(e);     }*/    box1Div.ondragover = function (e) {        e.preventDefault();//阻止系统默认的事件    }    box2Div.ondragover = function (e) {        e.preventDefault();//阻止系统默认的事件    }    img1.ondragstart = function (e) {        e.dataTransfer.setData("imgId", "img1");    }    img2.ondragstart = function (e) {        e.dataTransfer.setData("imgId", "img2");    }    box1Div.ondrop = dropImagHandler;    box2Div.ondrop = dropImagHandler;}function dropImagHandler(e) {//测试IE不支持    //     showObj(e.dataTransfer);    e.preventDefault();//阻止系统默认的事件//           var img = document.getElementById("img1");    var img = document.getElementById(e.dataTransfer.getData("imgId"));    //     box1Div.appendChild(img);    e.target.appendChild(img);// e.target获取当前指定的目标源}function showObj(obj) {    var s = "";    for (var k in obj) {        s += k + ":" + obj[k] + "<br>";    }    msgDiv.innerHTML = s;}

拖放本地资源:

 <script src="js.js"></script>    <style>        #imgContainer{            width: 500px;            height: 500px;            background-color: gray;        }    </style></head><body>    <div id="imgContainer"></div></body>

var imgContainer;window.onload = function () {    imgContainer = document.getElementById("imgContainer");    imgContainer.ondragover = function (e) {        e.preventDefault();    }    imgContainer.ondrop = function (e) {        e.preventDefault();        var f = e.dataTransfer.files[0];        var fileReader = new FileReader();        fileReader.onload = function (e) {//           imgContainer.innerHTML="<img src=\""+fileReader.result  + "\">"           imgContainer.innerHTML+="<img src=\""+fileReader.result  + "\">"    // 添加多张图片        }        fileReader.readAsDataURL(f);    }}

3.HTML5Canvas标签

创建Canvas标签
1.Canvas标签:
HTML<canvas>元素用于图形的回执,通过脚本(通常是JavaScript)来完成
<canvas>标签只是图形容器,您必须使用脚本来绘制图形
你可以通过多种方法使用Canva回执路径,盒,圆,字符以及添加图像
2.标签:
<canvas>
创建方法1:

canvas class="canvas" width="200px" height="200px"></canvas>

方法2:

window.onload= function () {    createCanvas()}function createCanvas(){    document.body.innerHTML += "<canvas id=\"mycanvas\" width='200px' height=\"200px\"></canvas> "//有没\转义字符都行}

绘制图形
1.绘制图形
canvas元素本身是没有绘图能力的.所有的回执工作必须在JavaScript内部完成
2.api
https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D

var mycanvas,context;window.onload= function () {    createCanvas()//    drawRect();    drawImg();}function createCanvas(){    document.body.innerHTML = "<canvas id=\"mycanvas\" width='500px' height=\"500px\"></canvas> "    mycanvas = document.getElementById("mycanvas");    context = mycanvas.getContext("2d");}function drawRect(){//绘制图形    context.fillStyle="red";  //改颜色//    context.rotate(45);//逆时针旋转    context.translate(200,200);//移动    context.scale(2,0.5)//缩放,x 2倍,y 0.5倍    //void fillRect(in float x, in float y, in float width, in float height);    //x,y起始坐标点,后两项为大小    context.fillRect(0,0,200,200);}function drawImg(){//绘制图片    //void drawImageFromRect(in HTMLImageElement image,    // in float sx 可选, in float sy 可选, in float sw 可选, in float sh 可选, in float dx 可选, in float dy 可选, in float dw 可选, in float dh 可选, in     // DOMString compositeOperation 可选);    var img = new Image();    img.onload = function () {        context.drawImage(img,0,0)//位置为(0,0);    }    img.src="3.png";}

4.HTML5Canvas应用

1.认识createjs

需要引入easeljs-0.7.1.min.js

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

var canvas;var stage;var txt;var count = 0;window.onload= function () {    canvas = document.getElementById("canvas");    stage = new createjs.Stage(canvas);    //Text ( [text]  [font]  [color] )    txt = new createjs.Text("这里写文字内容->","20px Arial","red");    stage.addChild(txt);    createjs.Ticker.setFPS(10);//    createjs.Ticker.addEventListener("tick",stage);//这里写文字内容->0    createjs.Ticker.addEventListener("tick",tick);}function tick(){    count++;    txt.text="这里写文字内容->"+count+"!";    stage.update();}

2.某炫酷的效果

<canvas id="canvas" width="1000px" height="500px"></canvas>

var canvas;var stage;var img = new Image();var sprite;window.onload = function () {    canvas = document.getElementById("canvas");    stage = new createjs.Stage(canvas);  //舞台    //添加监听事件    stage.addEventListener("stagemousedown",clickCanvas);    stage.addEventListener("stagemousemove",moveCanvas);    var data = {        images:["2.png"],        frames:{width:20,height:20,regX:10,regY:10}//序列  宽,高,变化区域    };    //var spriteSheet = new createjs.SpriteSheet(data); --API    //var instance = new createjs.Sprite(spriteSheet)    sprite = new createjs.Sprite(new createjs.SpriteSheet(data));    createjs.Ticker.setFPS(20);    createjs.Ticker.addEventListener("tick",tick);//监听};function tick(){    //stage.getNumChildren(); Returns the number of children in the display list.    var t = stage.getNumChildren();//Returns the number of children in the display list.    for(var i = t-1;i>=0;i--){        //stage.getChildAt(i); Returns the child at the specified index.        var s= stage.getChildAt(i);        s.vY += 2;        s.bX += 1;        s.x += s.vX;        s.y += s.vY;        s.scaleX = s.scaleY = s.scaleX + s.vS;        s.alpha += s.vA;        if(s.alpha<=0|| s.y>canvas.height){            stage.removeChildAt(i);        }    }    stage.update();}function clickCanvas(){    //stage.mouseX,stage.mouseY,鼠标位置    addS(Math.random()*200+100,stage.mouseX,stage.mouseY,2);}function moveCanvas(){    addS(Math.random()*2+1,stage.mouseX,stage.mouseY,1);}function addS(count,x,y,speed){    for(var i=0;i<count;i++){        var s = sprite.clone();        s.x = x;        s.y = y;        s.alpha = Math.random()*0.5 + 0.5;     //透明度变化        s.scaleX = s.scaleY = Math.random() +0.3;    //缩放        var a = Math.PI * 2 * Math.random(); //范围        var v = (Math.random() - 0.5) * 30 *speed; // 速度        s.vX = Math.cos(a) * v;        s.vY = Math.sin(a) * v;        s.vS = (Math.random()-0.5)*0.2;  //scale        s.vA = -Math.random() * 0.05 -0.01;  //alpha        stage.addChild(s);    }}

5.SVG

SVG介绍
1.什么是SVG?

1):SVG指可伸缩矢量图形(Scalable Vector Graphics)
2):SVG用来定义用于网络的基于矢量的图形
3):SVG使用XML格式定义图形
4):SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
5):SVG是万维网联盟的标准

2.SVG优势:

1):SVG图像可通过文本编辑器来创建和修改
2):SVG图像可被搜索,索引,脚本化或压缩
3):SVG是可伸缩的
4):SVG图像可在任何的分辨率下被高质量地打印
5):SVG可在图像质量不下降的情况下被放大

3.api(元素):

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element

2.绘制矢量图形

<svg width="120" height="120" viewBox="0 0 120 120" version="1.1">    <circle r="50" cx="60" cy="60"></circle><!--圆心(cx,cy)--></svg>

<!--IE11不支持--><svg width="120" height="120"     viewPort="0 0 120 120" version="1.1"     xmlns="http://www.w3.org/2000/svg">    <rect x="10" y="10" width="100" height="100">        <animate attributeType="XML"                 attributeName="x"                 from="-100" to="120"                 dur="10s"                 repeatCount="indefinite"/>    </rect></svg>

3.引入外部svg文件

    <iframe src="svg.svg" width="400" height="200" frameborder="no"></iframe>

svg.svg 例:

<?xml version="1.0"?><svg width="120" height="120"  viewBox="0 0 120 120"     xmlns="http://www.w3.org/2000/svg" version="1.1"     xmlns:xlink="http://www.w3.org/1999/xlink" >    <polygon points="60,30 90,90 30,90">        <animateTransform attributeName="transform"                          attributeType="XML"                          type="rotate"                          from="0 60 70"                          to="360 60 70"                          dur="10s"                          repeatCount="indefinite"/>    </polygon></svg>

0 0