H5中画布、拖放事件以及音视频的代码实例

2.7.2 基本绘制图片的方式

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

解释：x,y绘制的是图片左上角的坐标，img 是绘制图片的 dom 对象

eg:

    <canvas width="200" height="200"></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, 50,50);        }    </script>

2.7.3 在画布上绘制图像，并规定图像的宽度和高度

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

解释：width绘制图片的宽度，height 绘制图片的高度

注意：如果指定宽高，最好成比例，不然图片会被拉伸

等比公式：设置高 = 原高度 * 设置宽/ 原宽度

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);

参数说明：sx，sy裁剪的左上角坐标，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 使用标签

audio

音频标签，使用 controls = "" 将控件展示出来

video

视频标签，使用 controls = "" 将控件展示出来

source

   <source src=”sr1”></srouce>   使用source标签可以设置多个源

3.2 音视频元素( 用来控制音视频 )

3.2.1 标签属性

controls:显示或隐藏用户控制界面

autoplay：媒体是否自动播放

loop：媒体是否循环播放

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方法，这个属性在火狐浏览器中是可以实现的。

3.2.2 音视频在js中DOM的属性和方法

currentTime ：目前播放的时间点

duration：媒体总时间(只读)

volume:0.0-1.0的音量相对值

muted：是否静音

paused：媒体是否暂停(只读)

ended：媒体是否播放完毕(只读)

error：媒体发生错误的时候，返回错误代码(只读)

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 事件绑定

补充知识点：addEventListener(type, fn, false)

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

#### 3.2.3.1 DOM事件的三个阶段

捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象

目标阶段：到达目标事件位置（事发地），触发事件

冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象

注意: 当事件触发在目标阶段时，会根据事件注册的先后顺序执行，在其他两个阶段注册顺序不影响事件执行顺序。也就是说如果该处既注册了冒泡事件，也注册了捕获事件，则按照注册顺序执行。

3.2.4 音视频绑定事件

    <video controls="" src="res/1.mp4" id="v1"></video>    <script type="text/javascript">        window.onload = function() {            // 获取到相应的DOM节点            var v1 = document.getElementById("v1");            // 给dom节点绑定事件            v1.addEventListener("ended", function() {                alert("请选择下一个视频");            })        }    </script>

3.2.5 音视频的事件绑定

loadstart 开始加载progress 运行的进度suspend emptied stalled play 播放pause 暂停loadedmetadata loadeddata waiting 等待playing canplay canplaythrough seeking seeked timeupdate ended 结束ratechange durationchange Volumechange