CanvasImageSource

了解CanvasImageSource

简介

可以看成是一个简化的规范。，而非真的接口（控制台运行CanvasImageSource会报错，提示未定义）。是所有可以作为Canvas画布图片资源的统称，CanvasImageSource只是一个代称

其运行的图片资源类型包括下面这些：

• HTMLImageElement

  也即是HTML中常用的<img>元素，可以是页面中的DOM对象，也可以是内存中创建的IMG对象。

• SVGImageElement

  也就是SVG中的<image>元素。该接口继承关系如下图：

• HTMLVideoElement

  也就是HTML5中的<video>元素。该接口继承关系如下图：

• HTMLCanvasElement

  也就是HTML5中的<canvas>元素，详见这里。

• ImageBitmap

  ImageBitmap接口表示一个位图图像，可以将其绘制到Canvas而不会产生不适当的延迟。详见这里。

• OffscreenCanvas

  此接口提供了一个可以在屏幕外渲染的Canvas画布。它在window和worker上下文中都可用。使用示意：

  var offscreen = new OffscreenCanvas(256, 256);

  此接口兼容性比较差，且专为WebGL设计。本文档旨在推广Canvas 2D API，因此不展开。

案例

演示如何把HTMLVideoElement图像资源绘制到Canvas画布上。下面这个是视频资源：

点击下面这个按钮，可以把当前视频图像保留绘制在画布上。

效果如下：

相关HTML和JavaScript代码如下：

<video id="video" width="180" height="314" autoplay autobuffer muted>
    <source src="./sing-song.mp4" type="video/mp4">
</video>
<input type="button" id="button" value="截取视频">
<canvas id="canvas" width="180" height="314"></canvas>

var context = canvas.getContext('2d');
// 按钮
button.addEventListener('click', function () {
    context.clearRect(0, 0, 180, 314);
    context.drawImage(video, 0, 0, 180, 314);
});

其他

规范文档

相关资源

暂无

最近更新：by zhangxinxu 2019-10-18 01:43:54