This topic created in 1484 days ago, the information mentioned may be changed or developed.
试着用 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 Apr 16, 2022 via Android
你把 chrome 的硬件加速关掉试试
|
Select Language