13、HTML5 中 Canvas 与音视频元素的应用

HTML5 中 Canvas 与音视频元素的应用

1. Canvas 元素的图像操作

在 HTML5 中，JavaScript 可以通过 Image() 对象来处理图像。例如：

var img = new Image();
img.src = "/images/some.png";

利用相同的机制，我们可以将图像放置在 <canvas> 元素内的特定位置。下面将展示如何使用 JavaScript 对 <canvas> 元素和图像进行一些基本的操作。

1.1 示例设置

首先，创建一个原始图像 the-candle-lab.jpg ，并添加两个按钮：一个用于清除画布，另一个用于将整个源图像转换为灰度图像。同时，创建一个滑块，用于查看 0 到 255 范围内的特定灰度颜色。

<h2>Original Image</h2>
<img src="images/the-candle-lab.jpg">
<h2>Processed Image</h2>
<button onclick="clearCanvas()">Clear</button>
<button onclick="gray()">Grayscale</button>
<