HTMLCanvasElement

在本文章中

HTML canvas元素接口
属性
方法
例子: 从canvas对象中导出data: URL
浏览器支持

引进于 HTML5

HTML canvas元素接口

DOM canvas元素暴露了HTMLCanvasElement接口,该接口提供了用来操作一个canvas元素布局和呈现的属性和方法.HTMLCanvasElement接口继承了element接口的属性和方法.

属性

属性名	类型	描述
`height`	`unsigned long`	反应出HTML中对应标签的`height`属性的值,指定了该元素所占空间的高度,单位为像素.
`width`	`unsigned long`	反应出HTML中对应标签的`width`属性的值,指定了该元素所占空间的高度,单位为像素.

方法

方法名和参数	返回值	描述
`getContext(in DOMString contextId)`	`object`	返回canvas的绘制上下文,如果指定的上下文ID不支持,则返回null.一个绘制上下文可以让你在canvas上绘图.目前可接受的参数有"2d"和"experimental-webgl"."experimental-webgl"上下文只在那些实现了WebGL的浏览器上可用.调用getContext("2d")会返回一个 `CanvasRenderingContext2D`对象,调用getContext("experimental-webgl")会返回一个`WebGLRenderingContext`对象.
`toDataURL(in optional DOMString type, in any ...args)`	`DOMString`	返回一个`data:` URL,根据`type参数`指定的类型将包含在canvas中的图片文件编码成字符串形式, `type参数的默认值为image/png`. 如果该canvas的宽度或长度是0,则会返回字符串`"data:,`". 如果指定的`type`参数不是`image/png`,但返回的字符串是以`data:image/png`开头的,则所请求的图片类型不支持. Chrome支持`image/webp类型`. 如果`type`参数的值为`image/jpeg或image/webp`,则第二个参数的值如果在0.0和1.0之间的话,会被看作是图片质量参数,如果第二个参数的值不在0.0和1.0之间,则会使用默认的图片质量.
`toBlob(in` `Function` `callback, in optional` `DOMString` `type, in any ...args)`	`Blob`	返回一个`Blob`对象,表示了包含在该canvas中的图片文件,这个文件可能缓存在硬盘上,也可能存储在内存中,这由浏览器决定.如果`没有指定type`参数,则默认使用`image/png`.
`mozGetAsFile(in` `DOMString` `name, in optional` `DOMString` `type)`	`File`	返回一个`File`对象,表示了包含在该canvas中的图片文件,这个文件是存在于内存中的.还可以指定名称和图片类型,如果`没有指定type`参数,则默认使用`image/png`.
`void mozFetchAsStream(in nsIInputStreamCallback callback, [optional] in DOMString type);`	`void`	当新的数据流准备好时,则会调用指定的回调函数`nsIInputStreamCallback.onInputStreamReady()`,如果`没有指定type`参数,则默认使用`image/png`. 注: 只能在chrome代码中使用.

例子: 从canvas对象中导出data: URL

首先在canvas上绘出图形,然后调用canvas.toDataURL(),就能获取到该canvas对象中所包含图片编码后的data: URL字符串.

function test() {
 var canvas = document.getElementById("canvas");
 var url = canvas.toDataURL();
 var newImg = document.createElement("img");
 newImg.src = url;
 document.body.appendChild(newImg);
}

例子:从canvas对象中获得文件

Requires Gecko 2.0(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

你还可以从canvas元素中导出一个图片文件.下例就演示了:如何把一个canvas元素转换成图片,再把图片地址传给一个<img>元素并显示出来.

function test() {
 var canvas = document.getElementById("canvas");
 canvas.toBlob(function(blob) {
    var newImg = document.createElement("img"),
        url = URL.createObjectURL(blob);
    newImg.onload = function() {
        // no longer need to read the blob so it's revoked
        URL.revokeObjectURL(url);
    };
    newImg.src = url;
    document.body.appendChild(newImg);
 });
}

你可以把这项技术和鼠标事件结合起来,从而可以动态的修改一张图片,下例中演示的是切换图片灰度化:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MDC Example</title>
<script type="text/javascript">
function showColorImg() {
    this.style.display = "none";
    this.nextSibling.style.display = "inline";
}
function showGrayImg() {
    this.previousSibling.style.display = "inline";
    this.style.display = "none";
}
function removeColors() {
    var aImages = document.getElementsByClassName("grayscale"), nImgsLen = aImages.length, oCanvas = document.createElement("canvas"), oCtx = oCanvas.getContext("2d");
    for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId < nImgsLen; nImgId++) {
        oColorImg = aImages[nImgId];
        nWidth = oColorImg.offsetWidth;
        nHeight = oColorImg.offsetHeight;
        oCanvas.width = nWidth;
        oCanvas.height = nHeight;
        oCtx.drawImage(oColorImg, 0, 0);
        oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
        aPix = oImgData.data;
        nPixLen = aPix.length;
        for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
            aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
        }
        oCtx.putImageData(oImgData, 0, 0);
        oGrayImg = new Image();
        oGrayImg.src = oCanvas.toDataURL();
        oGrayImg.onmouseover = showColorImg;
        oColorImg.onmouseout = showGrayImg;
        oCtx.clearRect(0, 0, nWidth, nHeight);
        oColorImg.style.display = "none";
        oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
    }
}
</script>
</head>
<body onload="removeColors();">
<p><img class="grayscale" src="chagall.jpg" alt="" /></p>
</body>
</html>

注意,这里我们得到的是一张PNG图片,你还可以在toBlob()方法的第二个参数中指定图片类型.例如,下面的代码会得到一张JPEG格式的图片:

 canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG 质量为95%

查看在线演示 (使用了mozGetAsFile())

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	4.0	Unknown (3.6)	9.0	9.0	3.1

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	2.1	(Yes)	(Yes)	?	10.0	3.2

(Opera Mini 5.0-6.0 部分支持.)

文档标签和贡献者

另见