JavaScript 经典实例：第三版

406

｜

第

15

章

创建好画布上下文之后，就可以像在

HTML

页面的脚本中那样添加矩形、绘制路径、

创建弧形等。

15.4.4

扩展：使用画布还是

SVG

画布和

SVG

孰优孰劣，应该使用哪一个呢？帧型动画在

canvas

元素中速度更快，

浏览器只用重新绘制有变化的像素，无需重新创建整个场景。然而，如果必须支持

从智能手机到显示器等各种屏幕尺寸时，

canvas

元素在动画上的优势就会减弱。

SVG

的适应性更强。

SVG

的另一个优势是，它可以在库的强力辅助下实现丰富的数据可视化。不过，画

布在三维系统中应用广泛，例如

WebGL

。

同时使用

SVG

和画布是为了给

canvas

元素提供一种后备方案：

SVG

写入

DOM

，

持久存在，即使禁用

JavaScript

，

canvas

元素则不然。

15.5

音频文件开始播放时运行一个例程

15.5.1

问题

你想提供一个音频文件，在开始或结束播放时分享额外信息。

15.5.2

方案

使用

HTML5 audio

元素。

<audio

id="meadow" controls

>

<source

src="meadow.wav" type="audio/wav"

/>

<p><a

href="meadow.wav"

>

Meadow sounds

</a></p>

</audio>

捕获

play

事件（开始播放）或

ended

事件（结束播放）。

const

meadow = document.getElementById('meadow');

meadow.addEventListener('play', aboutAudio); ...