javascript - 使用 fillText 在 Canvas 上书写空白

Question

我有一个 Chart.js 圆环图，我必须在其中心显示一个值。有一个日期字段会刷新图表，从而影响中心值。

var text = dataTxt,
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;
    ctx.fillText(" ", textX, textY);//attempting to write blank value.
    ctx.fillText(text, textX, textY); //this writes the value.
    ctx.save();

问题是，在图表的后续更新中，中心区域没有被清除，并且该值被写入旧的区域。

为此，我在上面的代码中添加了行 ctx.fillText("", textX, textY); 但没有效果。关于如何在写入文本之前清理该区域有什么想法吗？

有一个 HTML/CSS 解决方案可以将数据写入中心，但我无法使用它，因为当图表下载为 PNG 时它不会导出中心数据。

Answer 1

在典型的用例中，人们不会尝试“撤消” Canvas 上的更改 - 清除 Canvas 并重新开始绘制要容易得多。

ctx.clearRect(0, 0, canvas.width, canvas.height);
// Do my drawing again
myChart.update(); // With chart.js this triggers a redraw.

就您而言，我认为您错误地认为 Canvas 会保存文本图像并让您在后续绘图中更改它。可以将其想象为 Microsoft Paint - 一旦文本出现在图像上，您将无法在不撤消的情况下轻松删除它。