canvans绘画优化-不阻塞主进程

//index.js

const drawSunshine=()=>{
    console.time("canvas 绘制完成");
    const canvas = document.getElementById('myCanvas').transferControlToOffscreen()
    const worker = new Worker('./worker.js')
    worker.postMessage({canvas}，[canvas])
    worker.onmessage=(res)=>f
    console.timeEnd("canvas 绘制完成");
}

// work.js

  onmessage=(e)=>{
    // 获取传递的数据
    const data = e.data;
    //接收 canvas dom
    const canvas = data.canvas
    //获取Canvas元素和2D上下文
    const ctx= canvas.getContext("2d");
    const lines =500
    //设置文字样式
    const fontSize = 20;
    ctx.font = fontSize + "px Arial";
    ctx.fillstyle ="orange";
    // 要显示的文本
    const text="sunshine";
    const wordsPerLine =10000;//每行的单词数
    const lineHeight=fontsize *1.2;//行高
    // 绘制十行文本
    for(let i=0;i< lines; i++){
    let line ="";// 每行的文本for(let j=0;j<wordsPerLine;j++){line +=`${text}-${i + 1}-${j}`;
    requestAnimationFrame(()=>{//绘制文本ctx.fillText(line,0,(i + 1)* lineHeight)
    postMessage('完成')
}