Question

Canvas元素有多少个底层位图。我认为它必须至少有两个，一个用于缓冲，一个用于屏幕投影。它是浏览器特定的还是标准化（如果是，那么在哪里）计数？

Answer 1

＆＃34; Canvas元素构成了多少位图？＆＃34;

<强>零！

canvas元素维护一个包含红色，绿色，蓝色和＆amp;的数组。它将在屏幕上显示的每个像素的alpha值。在现代浏览器中，数组的类型为Uint8ClampedArray。您可以将此数组视为一种位图 - 但事实并非如此。

所以对你的问题最接近的答案是： Canvas有一个或多个RGBA像素阵列作为＆＃34;支持商店＆＃34;或＆＃34;缓冲＆＃34;。

当浏览器请求画布重绘时，这个数组（或它的alpha预乘版本）会被插入GPU（或者如果不存在GPU，则连接到CPU）。

您可以使用以下方法获取此RGBA数组：

// Fetch the imageData object that contains the pixel array
var imgData = context.getImageData(0,0,canvas.width,canvas.height);

// Fetch the pixel array itself
var pixelArray = imgData.data;

然后，您可以使用context.putImageData(pixelArray,0,0)操纵每个像素RGBA值并将操纵的数组推回到画布。在浏览器下一次屏幕刷新期间，执行putImageData将自动导致浏览器将修改后的数组blit到显示屏上。

你可以参考＆＃34; WhatWG＆＃34;官方标准＆amp;与canvas元素相关的规范：https://developers.whatwg.org/the-canvas-element.html#the-canvas-element。

但是，每个浏览器都可以实施标准＆amp;他们认为合适的规范和一些浏览器需要更长的时间来实现标准和规范。有些浏览器现在是开源的，因此如果需要，您可以查看每个浏览器的实现代码。

Canvas底层位图

1 个答案: