HTML canvas 上的奇怪渲染

Question

简介

我设计了一个网站来显示一些统计数据。我想添加圆形图表作为数据的可视化表示（例如温度、速度等）。我的做法是添加一个Canvas，然后使用canvas'上下文来绘制一个弧值的适当角度。如下所示，效果非常好。

代码

CircleChart class:

class CircleChart {

    constructor(ID, radius, maxValue, barColor, textSymbol, textColor) {
        this.ID = ID;
        this.radius = radius;
        this.maxValue = maxValue;
        this.barColor = barColor;
        this.textSymbol = textSymbol;
        this.textColor = textColor;
        this.lineWidth = radius/4;
    }

    draw(value) {
        const canvas = document.getElementById("stats-canvas" + this.ID);
        const context = canvas.getContext("2d");

        context.clearRect(0, 0, this.radius*2, this.radius*2);

        context.strokeStyle = this.barColor;
        context.lineWidth = this.lineWidth;

        let angle = ((2 * Math.PI) / this.maxValue) * value;

        context.arc(canvas.width/2, canvas.height/2, this.radius - (this.lineWidth/2), 0, angle);
        context.stroke();

        //context.fillStyle = this.textColor;
        //context.font = (this.radius/2) + 'px san-serif';
        //context.fillText(value + this.textSymbol, this.x - (this.radius/2) - 15, this.y+10);
    }

}

然后我有以下定义：

const temp1Circle = new CircleChart(0, 100, 100, 'red', '°C', 'blue');
const temp2Circle = new CircleChart(1, 100, 100, 'red', '°F', 'blue');
const speedCircle = new CircleChart(2, 100, 100, 'red', 'Mph', 'blue');

这些是从一个函数中提取的，该函数每 3000 毫秒读取一次 GET 请求的响应。该过程概述如下

setTimeout(attemp_request, 3000); -> 每 3000 毫秒发送一个 HTTP GET 请求，并处理响应
将响应主体拆分为适当的数据（温度、速度等）
绘制每个圆图，应用收到的值。

目前我正在生成随机数据并绘制如下所示

function process_response(http_response_text) {
    // process all data into temp1, temp2 and speed
    update_stats(temp1, temp2, speed);
}

function update_stats(temp1, temp2, speed) {
    temp1Circle.draw(getRandomValue(0, 100));
    temp2Circle.draw(getRandomValue(0, 100));
    speedCircle.draw(getRandomValue(0, 100));
}

问题

首次加载页面时，图表绘制完美。然后更新它们时，会发生以下情况，一段时间后页面看起来像图 2。

图片 1（首次加载）：

图2（经过几次更新）：

有什么我想念的吗？我确保在每次绘制时调用 `context.clearRect()' 以确保 canvas 在绘制新弧之前是干净的。有什么建议吗？

Answer 1

在绘制新路径之前（进行更新时）您错过了对 beginPath 的调用，因此旧路径仍然存在（并且它的结束 link 到新的开始，这会创建线条）。

HTML canvas 上的奇怪渲染

Weird rendering on a HTML canvas

html

javascript

java

webserver

web