了解CanvasImageSource

    简介

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

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

    • HTMLImageElement

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

    • SVGImageElement

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

      EventTargetNodeElementSVGElementSVGGraphicsElementSVGImageElement

    • HTMLVideoElement

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

      EventTargetNodeElementHTMLElementHTMLMediaElementHTMLVideoElement

    • HTMLCanvasElement

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

    • ImageBitmap

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

    • OffscreenCanvas

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

      var offscreen = new OffscreenCanvas(256, 256);

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

    案例

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

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

    效果如下：

    相关HTML和JavaScript代码如下：

    ¥lt.video id="video" width="180" height="314" autoplay autobuffer muted¥gt.
    ¥lt.source src=";/sing-song;mp4" type="video/mp4"¥gt.
¥lt./video¥gt.
¥lt.input type="button" id="button" value="截取视频"¥gt.
¥lt.canvas id="canvas" width="180" height="314"¥gt.¥lt./canvas¥gt.
    var context } canvas,getContext;)2d)'(
// 按钮
button,addEventListener;)click). function ;' {
    context,clearRect;0. 0. 180. 314'(
    context,drawImage;video. 0. 0. 180. 314'(
='(

    其他

    规范文档

    规范地址 规范状态 备注
    HTML现行标准
    这个规范中定义了'CanvasImageSource'         		现行标准 初步定义。

    相关资源

    暂无

    by zhangxinxu 2019-10-18 01:43:54

     返回顶部