沉淀-初级HTML5（三）

HTML5音频视频
音频播放
1.Audio（音频）：HTML5提供了播放音频文件的标准
2.control（控制器）：control属性供添加播放、暂停和音量控件
3.标签：定义声音，规定多媒体资源，可以是多个

<!--按钮控制播放/暂停-->
<script>
    var a=document.getElementById("audio");
    function click() {
   if(a.paused){
      a.play();
   }else{
       a.pause();
   }
    }
</script>
<audio id="audio" src="raw/1.mp3">
  您的浏览器不支持该音频
</audio>
<button onclick="click()">播放/暂停</button>

编解码工具
视频中谷歌，Safari支持mp4,Safari和Firefox支持ogg，需要转换视频格式。
1.FFmpeg 官方网址：www.ffmpeg.org 官方直接按照版本下载转换格式。

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

<!--按钮控制播放/暂停/放大/缩小-->
<script>
    var a=document.getElementById("video");
    function click() {
   if(a.paused){
      a.play();
   }else{
       a.pause();
   }
    }
    function clickB() {
        a.width=800;
        a.height=800;
    }
    function clickS() {
        a.width=300;
        a.height=300;
    }
</script>
<video id="video">
    <source src="raw/1.mp4">
    <source src="raw/1.ogg">
  您的浏览器不支持该视频
</video>
<button onclick="click()">播放/暂停</button>
<button onclick="clickB()">放大</button>
<button onclick="clickS()">缩小</button>

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

<style>
        .box{
            width: 400px;
            height: 400px;
        }
        #box1{
            background-color: #333;
        }
        #box2{
            background-color: green;
        }
    </style>
    <!-- HTML5拖放 -->
<script>
    var box1,box2,msg,img1;
window.onload =function () {
    box1=document.getElementById("box1");
    box2=document.getElementById("box2");
    msg=document.getElementById("msg");
    img1=document.getElementById("img1");
    box1.ondragover=function (e) {
        e.preventDefault();
    }
    box2.ondragover=function (e) {
        e.preventDefault();
    }
    img1.ondragstart=function (e) {
        e.dataTransfer.setData('imgId',"img1");
    }
    box1.ondrop=dropimghandler;
    box2.ondrop=dropimghandler;
}
    function dropimghandler(e) {
        showObj(e.dataTransfer);
        e.preventDefault();
        var img=document.getElementById(e.dataTransfer.setData('imgId'));
        box1.appendChild(img);
    }
function showObj(obj) {
    var s="";
    for(var k in obj){
s+=k+":"+obj[k]+"<br>"
    }
    msg.innerHTML=s;
}
</script>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<image id="img1" src="1.jpg"></image>
<div id="msg"></div>

HTML5拖放本地资源

<style>
        .box{
            width: 500px;
            height: 500px;
        }
        #box1{
            background-color: #333;
        }

    </style>

<!-- HTML5拖放本地资源 -->
<script>
    var box1,msg;
window.onload =function () {
    box1=document.getElementById("box1");
    msg=document.getElementById("msg");
    box1.ondragover=function (e) {
        e.preventDefault();
    }
    box1.ondrop=function (e) {
        e.preventDefault();
        var f=e.dataTransfer.files[0];
        var fileReader=new FileReader();
        fileReader.onload=function (e) {
            msg.innerHTML="<img src=\""+fileReader+"\">"
        }
        fileReader.readAsDataURL(f);
    }
}
function showObj(obj) {
    var s="";
    for(var k in obj){
s+=k+":"+obj[k]+"<br>"
    }
    msg.innerHTML=s;
}
</script>
<div id="box1" class="box"></div>
<div id="msg"></div>

HTML5 画布 标签的使用

HTML5画布标签-创建画布
1.Canvas标签：HTML5 <canvas>元素用于图形的绘制，通过脚本（通常是JavaScript）来完成<canvas>标签只是图形容器，你必须使用脚本来绘制图形，你也可以通过多种方法使用Canvas绘制路径、盒、圆、字符以及添加图像
2.标签：<canvas>

<!-- 第一种方法 -->
<canvas class="canvas" width="200px" height="200px"></canvas>

<!-- 第二种方法 -->
<script>
    var CANVAS_WIDTH=200,CANVAS_HEIGHT=200;
   window.onload=function () {
       createCanvas();
   }
function createCanvas() {
    document.body.innerHTML="<canvas id=\"mycanvas\" width=\""+CANVAS_WIDTH+"\" height=\""+CANVAS_HEIGHT+"\"></canvas>"
}
</script>

HTML5画布标签-绘制图片

<!-- 绘制图片 -->
<script>
    var CANVAS_WIDTH=200,CANVAS_HEIGHT=200;
    var mycanvas,context;
   window.onload=function () {
       createCanvas();
       drawImage();
   }
function createCanvas() {
    document.body.innerHTML="<canvas id=\"mycanvas\" width=\""+CANVAS_WIDTH+"\" height=\""+CANVAS_HEIGHT+"\"></canvas>"
    mycanvas=document.getElementById("mycanvas");
    context=mycanvas.getContext("2d");
   }
   function drawImage() {
       var img=new Image();
       img.onload=function () {
       context.drawImage(img,0,0);
       }
       img.src="1.jpg";
   }
</script>

HTML5画布标签-绘制图形
1.绘制图形：canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成。

<!-- 绘制图形 -->
<script>
    var CANVAS_WIDTH=500,CANVAS_HEIGHT=500;
    var mycanvas,context;
   window.onload=function () {
       createCanvas();
       drawRect();
   }
function createCanvas() {
    document.body.innerHTML="<canvas id=\"mycanvas\" width=\""+CANVAS_WIDTH+"\" height=\""+CANVAS_HEIGHT+"\"></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);
       context.fillRect(0,0,200,200);
   }
</script>

HTML5画布使用路径