多媒体和图形编程

这个属于在客户端生成图片，可以减少服务器的压力

脚本化图片

web页面使用img元素，嵌入图片。

img元素可以通过控制src属性来操控img。一个栗子，鼠标经过的时候，改变图片

当鼠标经过的时候，会触发两个事件，分别是onmouseover以及onmouseout两个

html如下

js如下

// 获取元素let img = document.getElementsByTagName("img")[0]// 绑定事件img.addEventListener(onmouseover, () => {   this.src="./images/help_rollover.gif"; })img.addEventListener(onmouseout, () => {    this.src="./images/help.gif";})img.addEventListener(onclick, () => {    this.src="./images/help_onlick.gif";})

由于要实现图片翻转，需要较高的响应度，此时需要进行缓存，new一个Image对象创建一个HTMLImageElement对象实例

文档 即创建一个对象用来暂时储存图片。

let myImage = new Image(10, 200);    // 设置缓存的图片大小myImage.src="./picture.jpg";    // 设置缓存的图片位置document.body.appendChild(myImage)    // 添加一个子节点// 等价于let img = ""document.body.appendChild(img);

使用的是Image()类，创建对象

其中图片的懒加载可以使用Image类，先缓存图片，等待用户滑到的时候，然后触发事件，将src进行替换。

脚本化音频和视频

h5中引用了两个变迁audio和video两个标签

即使用上方两个标签，可以实现简单的视频和音频的插入

使用上方的两个标签实现简单的视频和音频的插入

由于标准的执行问题，所以使用source标签实现兼容

文档 下方是一个兼容的实现

Audio构造函数

Audio()构造函数类似Image()函数

例如

new Audio("./chime.wav").play();    // 载入并播放声音效果

这是音频的api，视频没有这个api

类型选择和加载

使用的是canPlayType进行的

原型为 HTMLMediaElement.canPlayType()能播放返回一个真值，不能播放返回一个假值

let a = new Audio();if (a.canPlayType("audio/wav")) {    a.src="./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为trueduration媒体时长initialTime表示媒体的开始时间等等还有很多，用的时候现查吧，过一遍，大致知道有这些属性即可

媒体相关事件

会有媒体的相关事件，必须使用addEventListener()方法注册在audio和video元素上，当被请求的时候触发，当被加载的时候触发等等。

下面是svg