如何在 canvas 中实现文本滚动

Question

我有下面的代码，它在 canvas 上呈现一个折射到 3D 对象的文本，我想使用翻译使文本通过鼠标滚轮滚动，但似乎无法使其绑定，有办法实现吗？

我已经用lineheight做了自动换行，并在不同的功能上使高清显示器上的字体文本不模糊，但似乎无法实现仅滚动，任何帮助将不胜感激。

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);

Answer 1

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

    function printAtWordWrap(context, text, x, y, lineHeight, fitWidth, line)

控制可以显示的行：

    if(currentLine >= line){
        //remove line value of currentline
        context.fillText(words.slice(0, idx - 1).join(' '), x, y + (lineHeight * (currentLine - line) )); }

请注意，ai 将 currentLin 的行值移至 canvas 位置。

看我的项目：https://codepen.io/Luis4raujo/pen/xxRrmoE

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

如果此回答对您有帮助，请投票或检查是否正确！

如何在 canvas 中实现文本滚动

How do you achieve text scrolling inside a canvas

scroll

three.js

html5-canvas