时间戳

首页 > 解决方案 > HTML5 Canvas - 第一页加载时模糊，刷新时清晰

html5-canvas - HTML5 Canvas - 第一页加载时模糊，刷新时清晰

问题描述

晚上好，

我对 HTML 画布相当陌生，并且被我遇到的一个问题逼疯了，我无法完全弄清楚。

到目前为止，我正在使用 HTML5 画布来绘制用于描述性统计目的的图表。我的问题是，在第一次加载页面时，它有时会与预期不同，我似乎在移动版本上观察到这种行为更多。

第一个加载版本 - 不正确的版本：

加载失败

页面刷新（以及任何后续页面刷新） - 更正一个：

加载成功

在这种情况下，我只是刷新了页面，它从第一个屏幕截图转到了第二个屏幕截图，有时它在第一次加载时正确显示，这就是为什么我无法弄清楚似乎是什么问题。

在阅读了有关设备像素比的信息后，我应用了以下内容以避免画布模糊的一般问题：

    const ratio = Math.ceil(window.devicePixelRatio)
    canvas.width = canvas.scrollWidth * ratio;
    canvas.height = canvas.scrollHeight * ratio;

但我的问题不在于画布总是模糊不清，而只是有时在第一页加载时，这让我不知所措。在线阅读后，我还尝试执行以下操作，但没有帮助：

    const ctx = canvas.getContext('2d');
    ctx.imageSmoothingEnabled = false;

标签： html5-canvas

解决方案

推荐阅读