了解HTMLCanvasElement

    简介

    是一个在浏览器可视窗体中可以全局访问的接口,HTMLCanvasElement可以看成是所有<canvas>元素的代称,会返回:,例如我们在Chrome浏览器控制台执行window.HTMLCanvasElement

    ƒ HTMLCanvasElement() { [native code] }

    几乎所有的标准HTML标签都有一个对应的接口名称,类似的还有HTMLDivElement(对应<div>元素), HTMLImageElement(对应<img>元素), HTMLParagraphElement(对应<p>元素)等一些列接口,然后全部都继承于HTMLElement,完整继承关系见下图。

    EventTargetNodeElementHTMLElementHTMLCanvasElement

    这些接口都是DOM Level 2中出现的,因此,IE9+浏览器才支持,IE8浏览器并不支持。考虑到<canvas>元素也是IE9+开始支持的,因此,如果你有需要使用HTMLCanvasElement的场景,就无需担心兼容性问题。

    通常这些接口会内置一些属性和方法,方便用户使用。我们也可以根据自己需求,自定义一些方法,方便调用。例如,下面这个检测canvas画布上是否有透明或半透明像素点的方法:

    // 检测canvas画布上是否有透明或半透明像素点
    HTMLCanvasElement.prototype.isSomeAlphaPixel = function () {
        var context = this.getContext('2d');
        // 获取图片像素信息
        var imageData = context.getImageData(0, 0, this.width, this.height).data;
        // 检测有没有透明数据
        var isAlphaBackground = false;
        for (var index = 3; index < imageData.length; index += 4) {
            if (imageData[index] != 255) {
                isAlphaBackground = true;
                break;    
            }
        }
        return isAlphaBackground;
    };

    此时,页面上任意<canvas>元素DOM对象都可以调用isSomeAlphaPixel()方法。例如:

    var canvas = document.querySelector('canvas');
    // 输出true或false
    console.log(canvas.isSomeAlphaPixel());

    属性

    除了idclassNametitle这类所有HTML元素都拥有的属性外,HTMLCanvasElement还有如下一些符合规范标准的属性。

    HTMLCanvasElement.height

    表示<canvas>画布绘制区域的高度,标准属性值为正整数,单位是像素。如果高度值不合法,例如负数,则会使用默认的150代替。为什么是150而不是其他高度值呢?这个是CSS规范中定义的,作为替换元素,默认的尺寸是300*150<canvas>元素就是替换元素,,因此默认高度是150。由于<svg>元素也是替换元素,因此,<svg>默认的尺寸也是300*150
    详细 »

    HTMLCanvasElement.width

    表示<canvas>画布绘制区域的宽度,标准属性值为正整数,单位是像素。如果宽度值不合法,例如负数,则会使用默认的300代替。为什么是300而不是其他宽度值呢?这个是CSS规范中定义的,作为替换元素,默认的尺寸是300*150<canvas>元素就是替换元素,因此默认宽度是300。由于<svg>元素也是替换元素,因此,<svg>默认的尺寸也是300*150
    详细 »

    方法

    除了querySelector()getAttribute()这类所有HTML元素都拥有的方法外,HTMLCanvasElement还有如下一些符合规范标准的方法。

    HTMLCanvasElement.getContext()

    获取<canvas>相关的可绘制的上下文,“上下文”这个词比较术语,你可以理解为“画笔工具箱”,其中包含各种API就好像工具箱中的各种画笔,有了这个,才能在<canvas>上绘制各种图形效果。如果方法调用的参数是'2d',则返回的是CanvasRenderingContext2D对象,如果参数是'webgl'(或者是'experimental-webgl'),则返回WebGLRenderingContext对象,当然,前提是浏览器需要支持WebGL,否则,返回值会是null。本站点目前并不会对WebGLRenderingContext进行介绍。
    详细 »

    HTMLCanvasElement.toDataURL()

    此方法可以将<canvas>画布转换为base64格式的图片数据,我们可以通过设定参数指定转换的图片类型,甚至图片的清晰度。
    详细 »

    HTMLCanvasElement.toBlob()

    可以将<canvas>画布转换为Blob对象。
    详细 »

    其他

    规范文档

    规范地址 规范状态 备注
    DOM元素媒介捕捉
    这个规范中定义了'HTMLCanvasElement'
    工作草案 新增了captureStream()方法。
    HTML现行标准
    这个规范中定义了'HTMLCanvasElement'
    现行标准 getContext()现在返回值是RenderingContext而不是一个纯object。 同时transferControlToOffscreen()方法被添加。
    HTML 5.1
    这个规范中定义了'HTMLCanvasElement'
    推荐 -
    HTML 5
    这个规范中定义了'HTMLCanvasElement'
    推荐 初始定义。

    相关资源

    暂无

    兼容性

    特性 确认支持 备注
    toBlob() IE10+ IE10也仅支持基本功能。
    其它 IE9+支持,全兼容。 -

    by zhangxinxu 2019-10-18 01:37:23