画布全屏100%导致模糊

是因为在网页中使用CSS的background-size: cover属性时，如果画布的尺寸与屏幕尺寸不匹配，会导致画布拉伸或压缩，从而导致模糊效果。

为了解决这个问题，可以采取以下方法：

1. 使用background-size: contain属性：这将确保画布完全显示在屏幕上，但可能会留有空白区域。
2. 使用JavaScript动态调整画布尺寸：通过监听窗口大小变化事件，可以动态调整画布的尺寸，确保其与屏幕尺寸匹配。
3. 使用矢量图形代替位图：矢量图形可以无损地缩放，因此不会出现模糊效果。可以使用SVG（可缩放矢量图形）或Canvas绘制矢量图形。
4. 使用高分辨率图像：如果必须使用位图，可以提供高分辨率的图像，以适应不同屏幕尺寸。可以使用@media查询和srcset属性来根据屏幕分辨率加载不同的图像。
5. 使用CSS像素而不是物理像素：在CSS中使用px单位时，它实际上是指CSS像素，而不是物理像素。可以使用window.devicePixelRatio属性获取设备的像素比例，并根据比例调整画布尺寸，以避免模糊效果。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云图片处理（Image Processing）
• 腾讯云内容分发网络（Content Delivery Network）
• 腾讯云云服务器（Cloud Virtual Machine）
• 腾讯云云函数（Serverless Cloud Function）
• 腾讯云弹性伸缩（Auto Scaling）
• 腾讯云对象存储（Cloud Object Storage）
• 腾讯云数据库（TencentDB）
• 腾讯云人工智能（AI）
• 腾讯云物联网（IoT）
• 腾讯云移动开发（Mobile Development）
• 腾讯云区块链（Blockchain）
• 腾讯云游戏多媒体引擎（GME）
• 腾讯云音视频处理（VOD）
• 腾讯云网络安全（Security）
• 腾讯云云原生应用引擎（Tencent Cloud Native Application Engine）
• 腾讯云云原生数据库（Tencent Cloud Native Database）