chrome 怎么不支持 canvas 了啊

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Get Google Chrome

› Vimium · 在 Chrome 里使用 vim 快捷键

这是一个创建于 187 天前的主题，其中的信息可能已经有所发展或是发生改变。

版本就是最新版本

顺便发现 v2 可以黏贴图片自动上传了啊 nice

第 1 条附言 · 178 天前

新版本已修复了好像

11 条回复 • 2024-05-20 13:58:29 +08:00

qwertyzzz

187 天前

测试

```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Example</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
</body>
</html>

```

qwertyzzz

187 天前

等待一会儿红色就没了

supuwoerc

187 天前

不是等一会，而是当页面不可见之后似乎渲染会被还原，祖传的问题了，好像有一个开关可以控制。

shadowyue

187 天前

你信 chrome 放弃支持 canvas 了，还是信我是秦始皇🐶

我测试你代码是正常的

supuwoerc

187 天前

mac 上稳定复现，切换下标签页就能复现出来，之前 GPT 的 SSE 对话也会因为这个特性鬼畜，好像是有一个版本为了减少 chrome 占用内存太夸张引入的 feature ，当标签页不活跃的时候会释放相关的占用。

```
function drawRectangle() {
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50);
}

function animate() {
drawRectangle();
requestAnimationFrame(animate);
}

animate();
```

```
function drawRectangle() {
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 50);
}

function animate() {
drawRectangle();
console.log(1);
requestAnimationFrame(animate);
}

animate();
```

supuwoerc

187 天前

@supuwoerc 贴重复了

```
function handleVisibilityChange() {
if (document.visibilityState === "visible") {
draw();
}
}
```

okakuyang

187 天前 via iPhone

chromr 设置性能内存省内存模式关掉看看

asmoker

187 天前 via Android

http://m.weibo.cn/status/5016533411562236?

Albertcord

187 天前

chrome 的 bug
具体查看 @asmoker 的 weibo 链接。

里面博主提到了一个 issue： https://issues.chromium.org/issues/328755781?continueFlag=d3e40984cd9e18aaa5c4121be68bf2d2
还有暂时解决问题的 workround：

···javascript
document.addEventListener("visibilitychange", function () {
if (document.visibilityState === "visible") {
const context = yourCanvas.getContext("2d");
context.fillStyle = "transparent";
context.fillRect(0, 0, 1, 1);
}
});
···

43n5Z6GyW39943pj

187 天前

最近更新的一版确实有问题, 估摸是内存回收出问题

Fca

187 天前

我也发现了，切回标签页再回来页面就没有了，触发更新就会出现