Scroll 如何在画布中实现文本滚动

我有下面的代码，在画布上渲染文本，折射到3D对象，我想用鼠标滚轮滚动文本，或者使用translate，但似乎无法使其绑定，有办法实现吗

我已经完成了文字换行，并使字体文字不模糊的高清显示器上的不同功能，但似乎无法实现滚动只，任何帮助将不胜感激谢谢

function printAtWordWrap(context, text, x, y, lineHeight, fitWidth) {
      fitWidth = fitWidth || 0;

      if (fitWidth <= 0) {
        context.fillText(text, x, y);
        return;
      }
      var words = text.split(' ');
      var currentLine = 0;
      var idx = 1;
      while (words.length > 0 && idx <= words.length) {
        var str = words.slice(0, idx).join(' ');
        var w = context.measureText(str).width;
        if (w > fitWidth) {
          if (idx == 1) {
            idx = 2;
          }
          context.fillText(words.slice(0, idx - 1).join(' '), x, y + (lineHeight * currentLine));
          currentLine++;
          words = words.splice(idx - 1);
          idx = 1;
        } else {
          idx++;
        }
      }

      if (idx > 0)
        context.fillText(words.join(' '), x, y + (lineHeight * currentLine));
    }

    var PIXEL_RATIO = (function() {
      var ctx = document.createElement("canvas").getContext("2d"),
        dpr = window.devicePixelRatio || 1,
        bsr = ctx.webkitBackingStorePixelRatio ||
        ctx.mozBackingStorePixelRatio ||
        ctx.msBackingStorePixelRatio ||
        ctx.oBackingStorePixelRatio ||
        ctx.backingStorePixelRatio || 1;

      return dpr / bsr;
    })();
    let can;

    function createHiDPICanvas(w, h, ratio) {
      if (!ratio) {
        ratio = PIXEL_RATIO;
      }
      can = document.createElement('canvas');
      can.width = w * ratio;
      can.height = h * ratio;
      can.style.width = w + "px";
      can.style.height = h + "px";
      can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);
      return can;
    }

    //Create canvas with a custom resolution.
    if (window.devicePixelRatio > 1) {
      var myCanvas = createHiDPICanvas(window.innerWidth, window.innerHeight, 4);
    } else {
      var myCanvas = createHiDPICanvas(window.innerWidth, window.innerHeight, 2);
    }

    var ctx = myCanvas.getContext('2d', {
      alpha: false,
      antialias: false
    });

    let x = window.innerWidth / 2;
    var y = window.innerHeight / 2;
    ctx.translate(0, 200);

    const font = new FontFace("MyCanvasFont", "url(https://use.typekit.net/af/2759ad/00000000000000007735a2d2/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3)");
    document.fonts.add(font);
    ctx.font = '300 150px "MyCanvasFont"';
    ctx.fillStyle = 'white';
    ctx.textAlign = 'center';
    var txt = 'CONNECTING BRANDS TO HUMANS THROUGH CULTURE, DESIGN AND TECHNOLOGY';

    printAtWordWrap(ctx, txt, x, y, 120, window.innerWidth / 2);

函数printAtWordWrap（上下文、文本、x、y、线宽）{ fitWidth=fitWidth | | 0； if（fitWidth 0&&idx fitWidth）{ 如果（idx==1）{ idx=2； } context.fillText（words.slice（0，idx-1）.join（“”），x，y+（lineHeight*currentLine））； currentLine++； 单词=单词拼接（idx-1）； idx=1； }否则{ idx++； } } 如果（idx>0） context.fillText（words.join（“”），x，y+（lineHeight*currentLine））； } 变量像素_比率=（函数（）{ var ctx=document.createElement（“画布”）.getContext（“2d”）， dpr=window.devicePixelRatio | | 1， bsr=ctx.webkitBackingStorePixelRatio|| ctx.MozBackingsStorePixelRatio|| ctx.msBackingStorePixelRatio|| ctx.ObackStorePixelRatio|| ctx.backingStorePixelRatio | | 1； 返回dpr/bsr； })(); 让我们可以； 函数createHiDPICanvas（宽、高、比）{ 如果（！比率）{ 比率=像素比； } can=document.createElement（'canvas'）； 罐宽=w*比值； 罐高=h*比值； can.style.width=w+“px”； can.style.height=h+“px”； can.getContext（“2d”）.setTransform（比率，0，0，比率，0，0）； 还可以； } //创建具有自定义分辨率的画布。 如果（window.devicePixelRatio>1）{ var myCanvas=createHiDPICanvas（window.innerWidth，window.innerHeight，4）； }否则{ var myCanvas=createHiDPICanvas（window.innerWidth，window.innerHeight，2）； } var ctx=myCanvas.getContext（'2d'{ 阿尔法：错， 反别名：假 }); 设x=window.innerWidth/2； 变量y=窗内高度/2； ctx.translate（0200）； const font=新字体（“MyCanvasFont”、“url”(https://use.typekit.net/af/2759ad/00000000000000007735a2d2/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3)"); document.font.add（字体）； ctx.font='300 150px“MyCanvasFont'； ctx.fillStyle='白色'； ctx.textAlign='中心'； var txt=‘通过文化、设计和技术将品牌与人类联系起来’； printAtWordWrap（ctx、txt、x、y、120、window.innerWidth/2）；

---

要点是：你需要知道如何显示第一行。您可以使用参数来控制此操作

函数printAtWordWrap（上下文、文本、x、y、线宽、行）

控制行可以显示的内容：

if（currentLine>=line）{
//删除currentline的行值
context.fillText（words.slice（0，idx-1）.join（“”），x，y+（lineHeight*（currentLine-line））；}

请注意，ai将currentLin的行值移到画布位置上

看看我的项目：

如果您可以向上隐藏行，则需要删除If语句（第24行）

---

如果这个答案对你有帮助，请投票或检查是否正确

非常感谢你，路易斯，是的，它确实帮助了我！