企业公司网站制作建设,88建网站,安徽建筑大学学工在线网站,wordpress后台设置中文题目
100*100的 canvas 占多少内存#xff1f;
在 三年前端#xff0c;面试思考 中提到了一个题目#xff0c;非常有新意#xff0c;这里分享一下当时面试的思考过程。
解题思路
其实真正的答案是多少我并不清楚#xff0c;面试过程中面试官也不期待一个准确的答案
在 三年前端面试思考 中提到了一个题目非常有新意这里分享一下当时面试的思考过程。
解题思路
其实真正的答案是多少我并不清楚面试过程中面试官也不期待一个准确的答案而是看你的思考过程。
如果了解过 Canvas 且做过滤镜相关的工作可能调用过
imageData ctx.getImageData(sx, sy, sw, sh); 这个 API。我记得这个 API 返回的是一个 ImageData 数组包含了 sx, sy, sw, sh 表示的矩形的像素数据。而且这个数组是 Uint8 类型的且四位表示一个像素。
我在面试的时候只能想起来这些信息。猜想一下我们在定义颜色的时候就是使用 rgba(r,g,b,a) 四个维度来表示而且每个像素值就是用十六位 00-ff 表示即每个维度的范围是 0~255即 2^8 位即 1 byte, 也就是 Uint8 能表示的范围。
所以 100 * 100 canvas 占的内存是 100 * 100 * 4 bytes 40,000 bytes。
声明
这里的答案并不一定准确。
关于 alpha 的争论
有同学指出alpha 不是 0-100 么我起初也有这样的疑问不过这篇文章中 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas 说 The data property returns a Uint8ClampedArray which can be accessed to look at the raw pixel data; each pixel is represented by four one-byte values (red, green, blue, and alpha, in that order; that is, RGBA format). Each color component is represented by an integer between 0 and 255. 也就是说即便是 alpha 也是 0-255
那么如何表示 alpha 呢
接下来这段代码中 可以看出只需要用 0-255 表示 0-100 就可以啦~
参考资料 CanvasRenderingContext2D.getImageData() 返回一个ImageData对象用来描述canvas区域隐含的像素数据这个区域通过矩形表示起始点为(sx, sy)、宽为sw、高为sh。 Uint8ClampedArray 描述了一个一维数组包含以 RGBA 顺序的数据数据使用 0 至 255包含的整数表示。 https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/getImageDatahttps://developer.mozilla.org/zh-CN/docs/Web/API/ImageDatahttps://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
