如何让处理器密集型函数更新节拍器的每一个节拍，并使用web workers绘制到画布？

// worker.js
self.onmessage = function(event) {
    const { data } = event;
    // 假设这里有一个复杂的计算函数
    const result = heavyComputation(data);
    self.postMessage(result);
};

function heavyComputation(data) {
    // 模拟一个耗时的计算过程
    let result = 0;
    for (let i = 0; i < data.length; i++) {
        result += data[i];
    }
    return result;
}

// main.js
const worker = new Worker('worker.js');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

function updateMetronome() {
    const data = generateData(); // 假设这是生成数据的函数
    worker.postMessage(data);
}

worker.onmessage = function(event) {
    const result = event.data;
    drawOnCanvas(result);
};

function generateData() {
    // 生成一些数据供worker处理
    return new Array(1000000).fill(1);
}

function drawOnCanvas(data) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'blue';
    ctx.fillRect(0, 0, data.length / 100, 50); // 示例绘制
}

setInterval(updateMetronome, 1000); // 每秒更新一次节拍器