html5畫布、拖放事件和音視頻功能介紹

本篇文章主要介紹html5中畫布、拖放事件和音視頻功能的使用。有一定的參考價值，有需要的朋友可以參考一下，跟隨小編一起來看解決方法吧。

一、拖放事件

1.1 設(shè)置拖拽

給標(biāo)簽設(shè)置一個draggable設(shè)置為true, 標(biāo)簽就可以拖拽了

1.2 拖拽事件

1.2.1拖拽元素事件 (事件對象為被拖拽元素)

• ondragstart   拖拽前觸發(fā)

• ondragend   拖拽結(jié)束觸發(fā)

• ondrag  拖拽前、拖拽結(jié)束之間，連續(xù)觸發(fā)

看實例：

<p draggable="true"><img src="images/225.jpg" alt="" style="width:100px;height: 100px;" ></p>
   <script>
       var  box = document.querySelector("p");
       box.ondragstart = function(){
           console.log("我被拖拽了！");
       }
       box.ondrag = function(){
           console.log("我在被拖拽的過程中");
       }
       box.ondragend = function(){
           console.log("拖拽結(jié)束了！");
       }
   </script>

1.2.2 目標(biāo)元素事件 (俗解：意思就是拖拽的元素放在哪里)

• ondragenter   進(jìn)入目標(biāo)元素觸發(fā)，相當(dāng)于mouserover

• ondragover  進(jìn)入目標(biāo)，離開目標(biāo)之間，連續(xù)觸發(fā)

• ondragleave 離開目標(biāo)元素觸發(fā)，相當(dāng)于mouseout

• ondrop  在目標(biāo)元素上釋放鼠標(biāo)觸發(fā)(要想觸發(fā)drop事件，就必須在ondragover的時間中阻止默認(rèn)事件)

1.2.3 even下的 dataTransfer 對象

• setData() : 設(shè)置數(shù)據(jù) key 和 value (必須是字符串)

• getData() : 獲取數(shù)據(jù)，根據(jù) key 值，獲取對應(yīng)的value

• effectAllowed :  拖住到相應(yīng)區(qū)域時顯示的光標(biāo)樣式(none、copy、copyLink、copyMove、link、linkMove、move、all、和uninitialized)

• setDragImage()  (當(dāng)這個傳遞的節(jié)點隱藏的時候只支持Firefox)

他是拖住時顯示的圖形和樣式  ， 有三個參數(shù)：指定的元素(指點的陰影樣式)，坐標(biāo)X  坐標(biāo)Y(x、y是拖拽時鼠標(biāo)的位置)

小案例：

     #box{margin-left:150px;}
    #box1 img{display: block;width:100px;height:100px;float:left;margin-left:20px;}

      <p id="box"><img src="images/回收站.png" alt=""></p>
    <p id="box1">
    <img src="images/唯美1.jpg">
    <img src="images/唯美2.jpg">
    <img src="images/唯美3.jpg">
    <img src="images/唯美4.jpg">
    </p>
<script type="text/javascript">
    //獲取 垃圾箱對象
    var box = document.querySelector("#box");
    //獲取圖片列表對象
    var imgList = document.querySelectorAll("img");
    //獲取圖片列表的父元素
    var box1 = document.querySelector("#box1");
    //遍歷圖片，并且增加拖拽開始事件
    imgList.forEach(function(item,index){
        item.ondragstart = function(event){
            event.dataTransfer.setData("name",index);
        }
    });
    //阻止冒泡
    box.ondragover = function(event){
        event.preventDefault();
    };
    box.ondrop = function(event){
        // 獲取拖拽元素的編號
        var index = event.dataTransfer.getData("name");
        box1.removeChild(imgList[index]);
    };
</script>

實例效果圖:

1.3 外部拖拽文件

files  (獲取外部拖拽的文件，返回一個filesList列表)

• length (event.dataTransfer.files.length)

• Type(event.dataTransfer.files[0].type) 比如：圖片的是(image/jpeg)

• FileReader 對象(讀取文件信息)

方法一：readAsDataURL():參數(shù)為要讀取的文件對象，將文件讀取為DataUrl
方法二：Onload()事件函數(shù):當(dāng)函數(shù)文件讀取成功完成的時候觸發(fā)此事件。（this.result用來獲取讀取到的文件數(shù)據(jù)，如果是圖片，將返回base64格式的圖片數(shù)據(jù)）

小案例：拖拽文件上傳：

    #box{width:200px;height:200px;line-height:200px;text-align:center;border:5px dashed #eeee;background:pink;}

     <p id="box">請將圖片拖到此區(qū)域</p>
    <p id="imgs"></p>
    <script>
       var box = document.querySelector("#box");
       var imgList = document.querySelector("#imgs");
       box.ondragover = function(event){
            event.preventDefault();
       };
       box.ondrop = function(event){
            event.preventDefault();
            // 獲取外部拖拽的文件
            var fileList = event.dataTransfer.files;
           for( var i = 0;i < fileList.length; i++){
                if(fileList[i].type.indexOf("image")>-1){
                    var fd = new  FileReader();
                    //讀取文件對象
                    fd.readAsDataURL(fileList[i]);
                    fd.onload = function(){
                        //創(chuàng)建一個圖片節(jié)點
                        var img = document.createElement("img");
                        img.src = this.result;
                        img.width = "200";
                        img.height = "200";
                        imgs.appendChild(img);
                    }
                }
           }
       };
    </script>

二、canvas(畫布)

2.1 什么是canvas？

• canvas是HTML5提供的一種新標(biāo)簽

• canvas是一個矩形區(qū)域的畫布，可以用JavaScript在上面繪畫

• canvas 標(biāo)簽使用 JavaScript 在網(wǎng)頁上繪制圖像，本身不具備繪圖功能

• canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法

• HTML5之前的web頁面只能用一些固定樣式的標(biāo)簽：比如p、p、h2等，但有了canvas Web頁面可以可以豐富多彩

2.2 canvas 的應(yīng)用領(lǐng)域

• 游戲。canvas在基于Web的圖像顯示方面比Flash更加立體、更加精巧，canvas游戲在流暢度和跨平臺方面更牛

• 可視化數(shù)據(jù).數(shù)據(jù)圖表，比如:百度的echart

• banner廣告：Flash曾經(jīng)輝煌的時代，智能手機(jī)還未曾出現(xiàn)?，F(xiàn)在以及未來的智能機(jī)時代，HTML5技術(shù)能夠在banner廣告上發(fā)揮巨大作用，用Canvas實現(xiàn)動態(tài)的廣告效果再合適不過

2.3 canvas 繪圖基礎(chǔ)

2.3.1 canvas 標(biāo)簽的屬性和語法

• 標(biāo)簽名canvas，需要進(jìn)行閉合。就是一普通的html標(biāo)簽

• 可以設(shè)置width和height屬性，但是屬性值單位必須是px，否則忽略

• width和hegiht：默認(rèn)300*150像素

• 注意：1.不要用CSS控制它的寬和高,會走出圖片拉伸

2.重新設(shè)置canvas標(biāo)簽的寬高屬性會讓畫布擦除所有的內(nèi)容

3.可以給canvas畫布設(shè)置背景色

2.4 canvas繪圖上下文 (context)

• 上下文：上知天文，下知地理。是所有的繪制操作api的入口或者集合。

• Canvas自身無法繪制任何內(nèi)容。Canvas的繪圖是使用JavaScript操作的

• Context對象就是JavaScript操作Canvas的接口

• 使用[CanvasElement].getContext(‘2d’)來獲取2D繪圖上下文

    <canvas></canvas>
    <script>
        var cas = document.querySelector("canvas");
        var ctx = cas.getContext("2d");
    </script>

2.5 基本的繪制路徑

2.5.1 canvas 坐標(biāo)系

canvas 的坐標(biāo)系從最左上角開始(0,0) .X 向右增大，Y向下增大

2.5.2 設(shè)置繪制起點(moveTo)

• 語法：ctx.moveTo(x,y)

• 解釋：設(shè)置上下文繪制路徑的起點。相當(dāng)于移動畫筆到某個位置

• 參數(shù)：x，y都是相對于canvas盒子的最左上角

• 注意：1. 繪制線段錢必須先設(shè)置起點，不然繪制無效

2.如果不設(shè)置起點，就會使用lineTo 的坐標(biāo)當(dāng)做moveTo

2.5.3 繪制直線(lineTo)

• 語法：ctx.lineTo(x,y)

• 解釋：從x，y的位置繪制一條直線到起點或者上一個線頭點

• x，y 線頭點坐標(biāo)

繪制第一條直線：

        <canvas width="200" height="200"></canvas>
    <script type="text/javascript">
        //獲取canvas 節(jié)點
        var cas = document.querySelector("canvas");
        cas.style.border = "1px solid red";
        // 獲取canvas 的上下文信息，首先獲取一個對象，然后在這個對象里面畫畫
        var  cts = cas.getContext("2d");
        //起點位置
        cts.moveTo(50, 50);
        // 終點位置
        cts.lineTo(100,100);
        // 開始描邊
        cts.stroke();
    </script>

2.5.4 路徑的開始與閉合

• 開始路徑：ctx.beginPath();

• 閉合路徑：ctx.closePath();

• 解釋：如果復(fù)雜路徑繪制，必須使用路徑開始和結(jié)束，閉合路徑會自動把最后的線頭和開始的線頭連在一起

• beginPath: 核心的作用是將不同繪制的形狀進(jìn)行隔離，每次執(zhí)行此方法，表示重新繪制一個路徑，跟之前繪制的墨跡可以進(jìn)行分開樣式設(shè)置和管理

畫一個三角形：

       <canvas width="200" height="200"></canvas>
    <script type="text/javascript">
        //獲取canvas 節(jié)點
        var cas = document.querySelector("canvas");
        cas.style.border = "1px solid red";
        // 獲取canvas 的上下文信息，首先獲取一個對象，然后在這個對象里面畫畫
        var  cts = cas.getContext("2d");
        cts.beginPath();
        //起點位置
        cts.moveTo(50, 50);
        // 終點位置
        cts.lineTo(100,100);
        cts.lineTo(200,100);
        cts.lineTo(50,50);
        // 開始描邊
        cts.stroke();
        cts.closePath();
    </script>

2.5.5  描邊(stroke)

• 語法：ctx.stroke();

• 解釋：根據(jù)路徑繪制線。路徑只是草稿，真正繪制線必須執(zhí)行stroke

• canvas 繪制的基本步驟

1. 獲得上下文  →canvasElem.getContext('2d');

2. 開始路徑規(guī)劃  →ctx.beginPath()

3. 移動起始點 → ctx.moveTo(x, y)

4. 繪制線(矩形、圓形、圖片...)  → ctx.lineTo(x, y)

5. 閉合路徑  → ctx.closePath();

6. 繪制描邊 → ctx.stroke();

2.5.6 繪制表格

    <canvas width="600" height="600"></canvas>
    <script>
        var cas = document.querySelector("canvas");
        cas.style.border = "1px solid red";
        // 獲取上下文信息
        var ctx = cas.getContext("2d");
        var rectH = 10;
        var rectW = 10;
        ctx.lineWidth = 0.3;
        // 繪制水平線
        for(var i= 0;i < cas.height/rectH; i++){
            ctx.moveTo(0,i*rectH);
            ctx.lineTo(cas.width, i*rectH);
        }
        // 繪制垂直線
        for(var i = 0; i < cas.width/rectW; i++){
            ctx.moveTo(i*rectH,0);
            ctx.lineTo(i*rectH,cas.width);
        }
        ctx.stroke();
    </script>




2.5.7 填充(fill)

• 語法：ctx.fill();

• 解釋：填充是將閉合路徑的內(nèi)容填充具體的顏色。默認(rèn)黑色

eg：

    <canvas width="600" height="600"></canvas>
    <script type="text/javascript">
    // 獲取節(jié)點對象
        var cas = document.querySelector("canvas");
    // 獲取上下文
        var cat = cas.getContext("2d");
    // 填充顏色為紅色
        cat.fillStyle = "red";
    // 開始 繪制
        cat.beginPath();
    // 繪制描邊的顏色為藍(lán)色
        cat.strokeStyle = "blue";
    // 設(shè)置起點的位置
        cat.moveTo(50,50);
    // 設(shè)置第二個點的位置
        cat.lineTo(200,200);
    // 設(shè)置第三個點的位置
        cat.lineTo(50,200);
    // 定義填充，如果不寫，會出錯
        cat.fill();
        cat.closePath();
    // 結(jié)束繪制
        cat.stroke();
    </script>



2.5.8 快速創(chuàng)建矩形(rect() 方法)

• 語法：ctx.rect(x, y, width, height)

• 解釋：x, y是矩形左上角坐標(biāo)， width和height都是以像素計

• rect方法只是規(guī)劃了矩形的路徑，并沒有填充和描邊

     <canvas width="200" height="200"></canvas>
    <script>
        var cas = document.querySelector("canvas");
        var cat = cas.getContext("2d");
        cat.rect(50, 50, 100,100);
        cat.fillStyle = "pink";
        cat.fill();
        cat.strokeStyle = "yellow";
        cat.stroke();
    </script>




2.5.9 快速創(chuàng)建描邊矩形和填充矩形

• 語法： ctx.strokeRect(x, y, width, height)

注意此方法繪制完路徑后立即進(jìn)行stroke繪制

• 語法2：ctx.fillRect(x, y, width, height)

此方法執(zhí)行完成后。立即對當(dāng)前矩形進(jìn)行fill填充
eg：

     <canvas width="200" height="200"></canvas>
    <script>
        var cas = document.querySelector("canvas");
        var cat = cas.getContext("2d");
        cat.strokeRect(50, 50, 100, 100);
        cat.stroke();
    </script>



eg:

      <canvas width="200" height="200"></canvas>
    <script>
        var cas = document.querySelector("canvas");
        var cat = cas.getContext("2d");
        cat.fillRect(50, 50, 100, 100);
        cat.stroke();
    </script>




2.5.10 清除矩形(clearRect())

• 語法：ctx.clearRect(x,y,w,h);

• 解釋：清除某個矩形內(nèi)的繪制的內(nèi)容，相當(dāng)于橡皮擦

2.6 繪制圓形

2.6.1 概述：arc() 方法創(chuàng)建弧/曲線（用于創(chuàng)建圓或部分圓）

• 語法：ctx.arc(x, y, r, sAngle, eAngle, counterclockwise)

• 解釋：x,y 圓心坐標(biāo)，r 半徑大小，sAngle:繪制開始的角度。圓心到最右邊點為0度，順時針方向弧度增大。eAngle：結(jié)束的角度，注意是弧度( π)。counterclockwise：是否是逆時針，true是逆時針，false：順時針

• 弧度和角度的轉(zhuǎn)換公式： rad = deg*Math.PI/180

eg:

     <canvas width="200" height="200"></canvas>
    <script>
        var cas = document.querySelector("canvas");
        cas.style.border = "1px solid red";
        var cat = cas.getContext("2d");
        cat.arc(100, 100, 100, 0, 2*Math.PI,false);
        cat.fillStyle = "skyblue";
        cat.fill();
        cat.stroke();
    </script>



繪制扇形占比

eg:

     <canvas width="200" height="200"></canvas>
    <script>
        var cas = document.querySelector("canvas");
        var cat =cas.getContext("2d");
        cat.beginPath();
        cat.fillStyle = "pink";
        cat.moveTo(100,100);
        cat.arc(100,100,100,0,70*Math.PI/180,true);
        cat.closePath();
        cat.fill();
        cat.stroke();
        cat.beginPath();
        cat.moveTo(100,100);
        cat.arc(100,100,100,0,200*Math.PI/180,false);
        cat.fillStyle = "red";
        cat.closePath();
        cat.fill();
        cat.stroke();
        cat.beginPath();
        cat.moveTo(100,100);
        cat.arc(100,100,100,0,90*Math.PI/180,false);
        cat.fillStyle = "blue";
        cat.closePath();
        cat.fill();
        cat.stroke();
    </script>



2.7 繪制圖片

2.7.1 用JS創(chuàng)建 img 對象

1. var img = document.getElementById("imgId")

2. var img = new Image();//這個就是 img標(biāo)簽的dom對象

img.src = "imgs/arc.gif";

img.alt = "文本信息";
img.onload = function() {
    //圖片加載完成后，執(zhí)行此方法

2.7.2 基本繪制圖片的方式

• 語法：context.drawImage(img,x,y);

• 解釋：x,y繪制的是圖片左上角的坐標(biāo)，img 是繪制圖片的 dom 對象

eg:

    <canvas width="200" height="200"></canvas>
    <script>
    // 創(chuàng)建對象
        var cas = document.querySelector("canvas");
      // 創(chuàng)建上下文
        var cat = cas.getContext("2d");
      // 創(chuàng)建圖片對象
        var img = new Image();
        img.src = "images/唯美1.jpg";
        img.onload = function(){
            cat.drawImage(img, 50,50);
        }
    </script>



2.7.3 在畫布上繪制圖像，并規(guī)定圖像的寬度和高度

• 語法：context.drawImage(img,x,y,width,height)

• 解釋：width繪制圖片的寬度，height 繪制圖片的高度

• 注意：如果指定寬高，最好成比例，不然圖片會被拉伸

• 等比公式：設(shè)置高 = 原高度 * 設(shè)置寬/ 原寬度

eg：

    <canvas width="600" height="600"></canvas>
   <script>
       var cas = document.querySelector("canvas");
       var cat = cas.getContext("2d");
       var img = new Image();
       img.src = "images/唯美1.jpg";
       img.onload = function(){
           // 圖片的原始的寬高為 500 * 313
           cat.drawImage(img, 0,0,400,313*400/500);
       }
   </script>



2.7.4 圖片裁剪，并在畫布上定位被裁剪的部分

• 語法：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

• 參數(shù)說明：sx，sy裁剪的左上角坐標(biāo)，swidth：裁剪圖片的寬度，sheight：裁剪的高度。

eg:

     <canvas width="600" height="600"></canvas>
    <script>
        var cas = document.querySelector("canvas");
        var cat = cas.getContext("2d");
        var img = new Image();
        img.src = "images/唯美1.jpg";
        img.onload = function(){
            cat.drawImage(img, 20,20,200,200,0,0,100,100);
        }
    </script>




三、音視頻

3.1 使用標(biāo)簽

• audio

音頻標(biāo)簽 ， 使用 controls = "" 將控件展示出來

• video

視頻標(biāo)簽，使用 controls = "" 將控件展示出來

• source

     <source src=”sr1”></srouce>
     使用source標(biāo)簽可以設(shè)置多個源

3.2 音視頻元素( 用來控制音視頻 )

3.2.1 標(biāo)簽屬性

• controls:顯示或隱藏用戶控制界面

• autoplay：媒體是否自動播放

• loop：媒體是否循環(huán)播放

eg：

    <audio src="yinping/johann_sebastian_bach_air.mp3" autoloop loop controls></audio>
 <script>
     var auo = document.querySelector("audio");
     window.onload = function(){
        setInterval(function(){
            auo.play();
        },1000);
     }


注意：autoplay 屬性在谷歌瀏覽器中不支持，所以小編在這里用了一個setInterval方法，這個屬性在火狐瀏覽器中是可以實現(xiàn)的。


3.2.2 音視頻在js中DOM的屬性和方法

• currentTime ： 目前播放的時間點

• duration：媒體總時間(只讀)

• volume:0.0-1.0的音量相對值

• muted：是否靜音

• paused：媒體是否暫停(只讀)

• ended：媒體是否播放完畢(只讀)

• error：媒體發(fā)生錯誤的時候，返回錯誤代碼(只讀)

• currentSrc：以字符串的形式返回媒體地址(只讀)

• play：媒體播放

• pause：媒體暫停

• load：重新加載媒體

eg：

    <video id="v1" src="res/fun.mp4" ></video>
    <input type="button" value="我要暫停" id="btn1">
    <input type="button" value="我要播放" id="btn2">
    <input type="button" value="我要切換視頻" id="btn3">
    <script type="text/javascript">
        window.onload = function() {
            var v1 = document.getElementById("v1");

            var btn1 = document.getElementById("btn1");
            var btn2 = document.getElementById("btn2");

            btn2.addEventListener('click', function() {
                v1.play();
            })

            btn1.onclick = function() {
                v1.pause();
            }

            btn3.onclick = function() {
                v1.src = "res/1.mp4";
                v1.play();
            }

        }
    </script>



3.2.3 事件綁定

• 補(bǔ)充知識點：addEventListener(type, fn, false)

false，表示不使用捕獲（useCapture）

#### 3.2.3.1 DOM事件的三個階段

• 捕獲階段：先由文檔的根節(jié)點document往事件觸發(fā)對象，從外向內(nèi)捕獲事件對象

• 目標(biāo)階段：到達(dá)目標(biāo)事件位置（事發(fā)地），觸發(fā)事件

• 冒泡階段：再從目標(biāo)事件位置往文檔的根節(jié)點方向回溯，從內(nèi)向外冒泡事件對象

• 注意: 當(dāng)事件觸發(fā)在目標(biāo)階段時，會根據(jù)事件注冊的先后順序執(zhí)行，在其他兩個階段注冊順序不影響事件執(zhí)行順序。也就是說如果該處既注冊了冒泡事件，也注冊了捕獲事件，則按照注冊順序執(zhí)行。

3.2.4 音視頻綁定事件

    <video controls="" src="res/1.mp4" id="v1"></video>
    <script type="text/javascript">
        window.onload = function() {
            // 獲取到相應(yīng)的DOM節(jié)點
            var v1 = document.getElementById("v1");
            // 給dom節(jié)點綁定事件
            v1.addEventListener("ended", function() {
                alert("請選擇下一個視頻");
            })
        }
    </script>



3.2.5 音視頻的事件綁定

loadstart   開始加載
progress  運行的進(jìn)度
suspend
emptied
stalled
play  播放
pause  暫停
loadedmetadata  
loadeddata
waiting  等待
playing
canplay
canplaythrough
seeking
seeked
timeupdate
ended  結(jié)束
ratechange
durationchange
Volumechange

看完上述內(nèi)容，你們掌握html5中畫布、拖放事件和音視頻功能的使用了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！