chrome 怎么不支持 canvas 了啊

29 天前
 qwertyzzz

版本就是最新版本

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

1746 次点击
所在节点    Chrome
11 条回复
qwertyzzz
29 天前
测试

```
<!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
29 天前
等待一会儿 红色就没了
supuwoerc
29 天前
不是等一会,而是当页面不可见之后似乎渲染会被还原,祖传的问题了,好像有一个开关可以控制。
shadowyue
29 天前
你信 chrome 放弃支持 canvas 了,还是信我是秦始皇🐶

我测试你代码是正常的
supuwoerc
29 天前
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
29 天前
@supuwoerc 贴重复了

```
function handleVisibilityChange() {
if (document.visibilityState === "visible") {
draw();
}
}
```
okakuyang
29 天前
chromr 设置 性能 内存 省内存模式 关掉看看
asmoker
29 天前
Albertcord
29 天前
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);
}
});
···
MorJS
29 天前
最近更新的一版确实有问题, 估摸是内存回收出问题
Fca
29 天前
我也发现了,切回标签页再回来页面就没有了,触发更新就会出现

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1042160

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX