У меня есть компонент, который отрисовывает график используя canvas. Из-за большого количества графиков хотелось бы попробовать вынести все расчёты в Web Worker. Насколько я знаю, из другого потока нельзя управлять DOM, но я находил примеры, как это можно сделать с img через drawImage. Может кто-то имеет опыта подобного рода?
Код прост:
private draw() {
if (!this._data.length || !this.canvas) {
return;
}
let maxX = this.getMaxX(),
minX = this.getMinX(),
maxY = this.getMaxY(),
width = this.canvas.width,
height = this.canvas.height,
ctx = this.canvas.getContext("2d"),
ratioY = height / maxY;
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, width, height);
ctx.restore();
ctx.beginPath();
ctx.fillStyle = this.colorMap.get(this.status);
ctx.strokeStyle = this.colorMap.get(this.status);
ctx.moveTo(width * ((maxX - +this._data[0].time) / (maxX - minX)), height);
for (let i = 0; i < this._data.length; i++) {
let d = this._data[i];
let x = width * ((maxX - +d.time) / (maxX - minX));
let y = height - (d.value * ratioY);
ctx.lineTo(x, y);
}
ctx.lineTo(width * ((maxX - +this._data[this._data.length - 1].time) / (maxX - minX)), height);
ctx.lineTo(width * ((maxX - +this._data[0].time) / (maxX - minX)), height);
ctx.fill();
ctx.closePath();
ctx.stroke();
}
