canvas疑点验证

[jindada]

主流浏览器中canvas的限制

在 chrome 和 safari 下验证

1 单个canvas的最大面积都是 268435456 (16384 * 16384)

2 单边长度限制, 查阅资料显示最大宽高为32767, 实际验证的结果是 chrome 下的最大单边长度是 65535, safari 下的最大单边长度是 4194304

3 canvas总体积的限制: chrome: 无限制 safari: 4096MB

验证方法:

const canvas = document.createElement("canvas");
canvas.width = 1000;
canvas.height = 1;

test();

function test() {
    canvas.width = canvas.width + 1;
    console.log("正在测试", canvas.width)
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'blue';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    const isTestPass = ctx && ctx.getImageData(0, 0, 1, 1).data[3] !== 0;
    if (isTestPass) {
        console.log("测试通过");
        test();
    } else {
        console.log("测试失败", canvas.width);
    }   
}

[jindada]

canvas的内存占用情况

占用浏览器的渲染进程的内存占用

宽高为16384 * 16384的canvas大概占用1G

[jindada]

将canvas的宽高设置成0是否可以真的清除占用

chrome 下可以

safari 在dom挂载的不可以, 不再dom中挂载的可以 不执行getContext在safari中是不会创建图形的

var i = 0;
setTimeout(() => {
    test();
}, 10000);

function test() {
    const canvas = document.createElement("canvas");
    canvas.width = 16384;
    canvas.height = 16384;
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    // document.body.appendChild(canvas);
    const isTestPass = ctx && ctx.getImageData(0, 0, 1, 1).data[0] === 255;
    console.log(ctx.getImageData(0, 0, 1, 1).data);
    if (isTestPass) {
        i++;
        console.log("测试通过", i);
        canvas.width = 0;
        canvas.height = 0;
        test();
    } else {
        console.log("测试失败", canvas.width);
    }   
}

[jindada]

是否可以验证当前浏览器的canvas限制/剩余空间限制

验证限制可以, 剩余空间暂时没找到好的办法

[jindada]

canvas绘制内容的改变会触发浏览器的重排和重绘吗, 绘制是在渲染进程中进行的吗？

不会, 它不涉及dom，也就不涉及dom树、样式计算、布局、分层

canvas绘制流程很简单，就是调用api直接在画布上绘制，没有DOM，所有的绘制都是自己程序控制的