多媒体和图形编程
这个属于在客户端生成图片，可以减少服务器的压力
脚本化图片
web页面使用img元素，嵌入图片。
img元素可以通过控制src属性来操控img。
一个栗子，鼠标经过的时候，改变图片
当鼠标经过的时候，会触发两个事件，分别是onmouseover以及onmouseout两个
html如下
<!doctype html>
<html>
<head>
<title>这是一个模拟图片翻转的dome</title>
</head>
<body>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/help.gif">
</body>
</html>
js如下
// 获取元素
let img = document.getElementsByTagName("img")[0]
// 绑定事件
img.addEventListener(onmouseover, () => {
this.class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./images/help_rollover.gif";
})
img.addEventListener(onmouseout, () => {
this.class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./images/help.gif";
})
img.addEventListener(onclick, () => {
this.class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./images/help_onlick.gif";
})
由于要实现图片翻转，需要较高的响应度，此时需要进行缓存，new一个Image对象创建一个HTMLImageElement对象实例
文档 https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement/Image
即创建一个对象用来暂时储存图片。
let myImage = new Image(10, 200); // 设置缓存的图片大小
myImage.class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./picture.jpg"; // 设置缓存的图片位置
document.body.appendChild(myImage) // 添加一个子节点
// 等价于
let img = "<img width=100 height=200 src=./picture.jpg>"
document.body.appendChild(img);
使用的是Image()类，创建对象
其中图片的懒加载可以使用Image类，先缓存图片，等待用户滑到的时候，然后触发事件，将src进行替换。
脚本化音频和视频
h5中引用了两个变迁audio和video两个标签
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video
即使用上方两个标签，可以实现简单的视频和音频的插入
<audio class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="background_music.mp3"/>
<video class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="news.mov" width=320 height=240/>
使用上方的两个标签实现简单的视频和音频的插入
由于标准的执行问题，所以使用source标签实现兼容
文档 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/source
下方是一个兼容的实现
<video id="news" width=640 height=480 controls preload>
<!-- Firefor chrome 支持的web格式 -->
<source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="news.mp4" type="video/webm">
<!-- IE和Safair支持的h。264格式 -->
<source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="news.mp4" type="video/mp4">
<!-- flash插件用做后备方案 -->
<object width=640 height=480 type="application/x-hockwave-flash" data="flash_movie_player.swf">
<!-- 这里的参数配置flash视频播放器 --->
<!-- 文本用做后备内容 --->
<div>播放器不支持</div>
</object>
</video>
Audio构造函数
Audio()构造函数类似Image()函数
例如
new Audio("./chime.wav").play(); // 载入并播放声音效果
这是音频的api，视频没有这个api
类型选择和加载
使用的是canPlayType进行的
原型为 HTMLMediaElement.canPlayType()
能播放返回一个真值，不能播放返回一个假值
let a = new Audio();
if (a.canPlayType("audio/wav")) {
a.class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./soundeffect.wav";
a.play(); // 进行播放
}
控制播放
控制媒体播放使用的是play()和pause()方法用来控制和暂停媒体的播放
// 文档载入完成后，开始播放背景音乐
window.addEventListener("load", () => {
document.getElementById("music").play();
}, false);
通过设置urrentTime属性进行定点播放，
volume表示播放音量
playbackRate表示播放的速度
如果元素拥有controls属性，会在播放器上显示控件，让用户进行控制播放。
controls表示在浏览器中是否显示控件true为显示，false为隐藏，
查询媒体状态
他们有一些只读的属性，描述当前的状态。
播放器暂停，pause属性值为true
播放器跳转到一个新的播放点，seeking的值为true
如果完全播放完成，ended为true
duration媒体时长
initialTime表示媒体的开始时间
等等还有很多，用的时候现查吧，过一遍，大致知道有这些属性即可
媒体相关事件
会有媒体的相关事件，必须使用addEventListener()方法注册在audio和video元素上，当被请求的时候触发，当被加载的时候触发等等。
下面是svg
共同学习，写下你的评论
评论加载中...
作者其他优质文章
