HTMLCanvasElement

了解HTMLCanvasElement

简介

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

ƒ HTMLCanvasElement() { [native code] }

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

这些接口都是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());

属性

除了id，className，title这类所有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对象。

详细 »

其他

规范文档

相关资源

暂无

兼容性

最近更新：by zhangxinxu 2019-10-18 01:37:23