这是一个创建于 983 天前的主题，其中的信息可能已经有所发展或是发生改变。
试着用 canvas 做一个画板的时候，用每次触摸移动都会绘制一个圆实现。
但在 iOS Google Chrome 上测试时，绘制时，背景逐渐出现平铺的诡异纹路。圆外切了一个白色不透明的正方形。仅在 iOS Chrome 中有触发，在电脑或 iOS Firefox 、safari 等都无触发。
我后来简化成了定时绘制一个圆，依然有这种现象。
复现：
经过测试，发现触发 bug 需满足两个条件：
1 、合适的 canvas 宽高。对于不同尺寸的屏幕（甚至横放和竖放），有不同的范围。
2 、css 中 background-color 不为 transparent 。
同时，若缩放屏幕达到一定程度，纹路就会消失。松开时，纹路又开始出现。
两个解决办法：
1 、去掉 background-color 。这个是最佳解决办法，没有任何必要设置 background-color ，只需要绘制矩形即可实现背景。
2 、每一次绘制都把 canvas 的 imageData 先 get 出来再 set 回去。
尽管不是啥大问题，但我非常好奇为什么为出现这种 bug：既有宽高限制，又和 css 有关，纹路也很稀奇，还把 imageData 先 get 再 set 就可以解决，并且仅在 iOS Chrome 触发。看了下源码，没有头绪。
有大佬大概推测一下吗？
（测试用 100.0.4896.77 (正式版本) stable (64 位元) ）
但在 iOS Google Chrome 上测试时，绘制时，背景逐渐出现平铺的诡异纹路。圆外切了一个白色不透明的正方形。仅在 iOS Chrome 中有触发，在电脑或 iOS Firefox 、safari 等都无触发。
我后来简化成了定时绘制一个圆，依然有这种现象。
复现：
经过测试，发现触发 bug 需满足两个条件：
1 、合适的 canvas 宽高。对于不同尺寸的屏幕（甚至横放和竖放），有不同的范围。
2 、css 中 background-color 不为 transparent 。
同时，若缩放屏幕达到一定程度，纹路就会消失。松开时，纹路又开始出现。
两个解决办法：
1 、去掉 background-color 。这个是最佳解决办法，没有任何必要设置 background-color ，只需要绘制矩形即可实现背景。
2 、每一次绘制都把 canvas 的 imageData 先 get 出来再 set 回去。
尽管不是啥大问题，但我非常好奇为什么为出现这种 bug：既有宽高限制，又和 css 有关，纹路也很稀奇，还把 imageData 先 get 再 set 就可以解决，并且仅在 iOS Chrome 触发。看了下源码，没有头绪。
有大佬大概推测一下吗？
（测试用 100.0.4896.77 (正式版本) stable (64 位元) ）
 |
1
mxT52CRuqR6o5 2022-04-16 20:01:21 +08:00 via Android
你把 chrome 的硬件加速关掉试试
|
Select Language