现代浏览器支持通过
<video>元素播放视频。大多数浏览器也可以通过 MediaDevices.getUserMedia()API访问摄像头。但即使这两件事结合起来，我们也无法直接访问和操纵这些像素。幸运的是，浏览器有一个Canvas API，允许我们使用JavaScript绘制图形。实际上，我们可以从视频本身将图像绘制到
<canvas>，这使我们能够操作和展示这些像素。您在此学到的关于如何操作像素的方法，将成为您提供处理任何种类或任何来源的图像和视频的基础，而不仅仅是 canvas。
将图像添加到画布
在我们开始播放视频之前，让我们看看如何将图像添加到画布。
<img src>
<div>
<canvas id="Canvas" class="video"></canvas>
</div>我们创建了一个图像元素来表示要在画布上绘制的图像。或者，我们可以在JavaScript中使用Image对象。
var canvas;
var context;function init() {
var image = document.getElementById('SourceImage');
canvas = document.getElementById('Canvas');
context = canvas.getContext('2d');
drawImage(image);
// Or
// var image = new Image();
// image.onload = function () {
// drawImage(image);
// }
// image.src = 'image.jpg';
}
function drawImage(image) {
// Set the canvas the same width and height of the image
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0);
}
window.addEventListener('load', init);
上面的代码将整个图像绘制到画布上。
通过 CodePen上的Welling Guzman（(@wellingguzman）查看画布上的 Paint image on canvas图像。
现在我们可以开始玩这些像素了！
更新图像数据
画布上的图像数据允许我们操纵和更改像素。
data属性是一个 ImageData对象，它具有三个属性 – 宽度，高度和数据/所有这些都代表基于原始图像的东西。所有这些属性都是只读的。我们关心的是数据，一个由 Uint8ClampedArray对象表示的一维数组，包含RGBA格式中每个像素的数据。
尽管数据属性是只读的，但并不意味着我们无法更改其值。这意味着我们不能将另一个数组分配给此属性。
// Get the canvas image data
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);image.data = new Uint8ClampedArray(); // WRONG
image.data[1] = 0; // CORRECT
你可能会问，Uint8ClampedArray对象代表什么值。以下是来自MDN的描述：
Uint8ClampedArray类型数组表示一个8位无符号整数的数组，它被钳位到0-255;如果您指定的值超出[0,255]的范围，则将设置0或255;如果你指定一个非整数，最近的整数将被设置。内容初始化为0.一旦建立，就可以使用对象的方法引用数组中的元素，或使用标准数组索引语法（即使用括号表示法）
