我们知道清除canvas内容有两种方法。第一种方法是cearRect函数：context.cearRect(0,0,canvas.width,canvas.height)第二种方法是重新设置canvas的宽度（或高度）为原来的值canvas.width=canvas.width//orcanvas.height=canvas.height第二种方法之所以可行，是因为canvas的一个特性：每当画布的高度或宽度被重置时，画布内容就会被清空。相关内容请参考https://www.w3school.com.cn/html5/att_canvas_width.asp在一个可视化项目中，我们发现有些电脑总是出现乱序的效果。经过调试，我们发现是“canvas.width=canvas.width”惹的祸。普通屏幕下不会有问题，但如果屏幕是高清屏幕，就会出现问题。这是因为，在高清屏幕下，为了处理画图模糊的问题，我们通常会做如下处理：functionsetupCanvas(canvas){设备像素比||1.0;如果(dpr!=1.0){canvas.style.width=width+"px";canvas.style.height=height+"px";canvas.height=height*dpr;canvas.width=宽度*dpr;ctx.scale(dpr,dpr);我们知道window.devicePixelRatio在高清屏下是大于1的。所以画笔在绘制之前会进行缩放：ctx.scale(dpr,dpr);我们知道cavnas是基于状态的绘图组件。缩放值也在状态管理中。当我们重置画布的宽（高）时，不仅会清空画布的画布内容，还会将绘图状态重置为最原始的状态。在原始状态下，画笔的缩放比例为1，缩放比例值会被重置为1，从而导致绘制效果乱七八糟。如果读者对“高清屏幕下canvas处理绘图模糊及处理方法”“canvas绘图状态”等知识点不清楚，建议学习相关知识，有兴趣的读者也推荐订阅我的专栏：CanvasAdvancedAdvancedhttps://xiaozhuanlan.com/canvas，相关知识将从本文的部分专栏中摘录改编。欢迎关注公众号“IT人飚大叔”。飚叔，10多年开发经验，现任公司系统架构师、技术总监、技术培训师、职业规划师。对计算机图形学、WebGL、前端可视化有深入研究。对程序员思维能力的训练与训练，程序员职业生涯规划有着浓厚的兴趣。
