canvas的闪烁主要和平台有关,如何去避免需要慢慢积累经验。
1. clearRect造成闪烁
使用clearRect清空局部区域后重绘能会造成闪烁。PC上问题不大,移动端比较明显。(注clearRect(0,0,canvas.width,canvas.height)也会闪烁,除非是clearRect(0,0,canvas.width+1,canvas.height+1))。
原因:
可能是canvas抗锯齿的动作导致。关于该问题的分析见:https://stackoverflow.com/questions/64043191/html5-canvas-is-flickering-in-google-chrome
解决办法 :
(1)等待浏览器优化canvas
(2)使用前面链接中的纠正代码
(3)不使用clearRect
2 代码指定的逻辑座标与canvas实际绘制时物理位置的差异。
我在canvas上自绘了滚动条,并拿多行文本测试。发现文字存在闪烁,于是对文档偏移进行过滤,仅在奇数或偶数时绘制。
this.update = function(val){
oy = (val == undefined ? 0 : val);//纵向偏移
if((oy & 1) == 0){draw();}//基本不闪了
//var v = Date.now() & 1;
// if(v == 0){draw();}//不起作用
}