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 |
返回一个
|
|
|
Blob |
返回一个Blob对象,表示了包含在该canvas中的图片文件,这个文件可能缓存在硬盘上,也可能存储在内存中,这由浏览器决定.如果没有指定type参数,则默认使用image/png. |
mozGetAsFile(in DOMString name, in optional DOMString type) |
File |
返回一个File对象,表示了包含在该canvas中的图片文件,这个文件是存在于内存中的.还可以指定名称和图片类型,如果没有指定type参数,则默认使用image/png. |
void mozFetchAsStream(in |
void |
当新的数据流准备好时,则会调用指定的回调函数 注: 只能在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%
浏览器支持
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
| 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 部分支持.)