HTML5画布流畅的文字动画动画不可能？

2 回答

• 2

  您可以使用第三种方法a.k.a屏幕外画布来实现文本的平滑移动 .
  但是，实际上不可能在画布上实现平滑的文本渲染 .

  这是因为文本通常使用智能平滑算法进行渲染，并且画布无法访问此类子像素级别，因此它使模糊文本成为最佳 .

  当然，您可以尝试自己实现字体光栅化算法，SO用户Blindman67提供a good explanation along with a trying here，但它依赖于在移动目标上制作它的那么多参数（设备，UA，字体等）几乎是否定的-走 .

  因此，如果您需要在动画内容上进行完美的文字渲染， SVG is your friend . 但即使在SVG中，文本动画看起来也有点不稳定 .

  text{
    font: bold 16px Helvetica;
    fill: white;
    }
  

  <svg>
    <g id="group">
    <circle fill="blue" cx="15" cy="15" r="15"/>
    <text y="20" x="15" text-anchor="middle">AB
    </text>
      <animateTransform attributeName="transform"
                            attributeType="XML"
                            type="translate"
                            from="0 0"
                            to="80 150"
                            dur="20s"
                            repeatCount="indefinite"/>
    </g>
  </svg>
  

  否则，对于画布，您可以获得的最佳效果是将画布的大小加倍，然后使用屏幕后画布方法使用CSS向后缩小它 .

  var canvas = document.getElementById("canvas1");
  var ctx = canvas.getContext("2d");
  
  var scale = devicePixelRatio *2;
  canvas.width *= scale;
  canvas.height *= scale;
  
  function initTextsSprites(texts, radius, padding, bgColor, textColor, shadowColor) {
    // create an offscreen canvas which will be used as a spritesheet
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    radius *= scale;
    padding *= scale;
    
    var d = radius * 2;
  
    var cw = (d + (padding * 2));
    canvas.width = cw * texts.length;
    canvas.height = d * 2 + padding * 2;
  
    var topAlignText = 6 * scale; // just because I don't trust textBaseline
    var y;
  
    //  drawCircles
    ctx.fillStyle = bgColor;
    ctx.shadowOffsetX = ctx.shadowOffsetY = 2;
    ctx.shadowBlur = 6;
    ctx.shadowColor = shadowColor;
    y = (radius * 2) + padding;
    ctx.beginPath();
    texts.forEach(function(t, i) {
      var cx = cw * i + padding * 2;
      ctx.moveTo(cx + radius, y)
      ctx.arc(cx, y, radius, 0, Math.PI * 2);
    })
    ctx.fill();
  
    // drawBlueTexts
    ctx.textAlign = "center";
    ctx.font = "bold "+(16 * scale)+"px Helvetica";
    ctx.shadowOffsetX = ctx.shadowOffsetY = ctx.shadowBlur = 0;
    y = padding + topAlignText;
    texts.forEach(function(txt, i) {
      var cx = cw * i + padding * 2;
      ctx.fillText(i, cx, y);
    });
  
    //  drawWhiteTexts
    ctx.fillStyle = 'white';
    var cy = (radius * 2) + padding + topAlignText;
    texts.forEach(function(txt, i) {
      var cx = cw * i + padding * 2;
      ctx.fillText(txt, cx, cy);
    });
  
    return function(index, x, y, w, h) {
      if (!w) {
        w = cw;
      }
      if (!h) {
        h = canvas.height;
      }
      // return an Array that we will able to apply on drawImage
      return [canvas,
        index * cw, 0, cw, canvas.height, // source
        x, y, w, h // destination
      ];
    };
  }
  
  var texts = ['', 'AA', 'AB', 'AC'];
  
  var getTextSprite = initTextsSprites(texts, 15, 12, "blue", "white", "rgba(0, 0, 0, 0.4)");
  // just to make them move independently
  var objs = texts.map(function(txt) {
    return {
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      speedX: Math.random() - .5,
      speedY: Math.random() - .5,
      update: function() {
        this.x += this.speedX;
        this.y += this.speedY;
        if (this.x < 0) {
          this.speedX *= -1;
          this.x = 0;
        }
        if (this.y < 0) {
          this.speedY *= -1;
          this.y = 0;
        }
        if (this.x > canvas.width) {
          this.speedX *= -1;
          this.x = canvas.width;
        }
        if (this.y > canvas.height) {
          this.speedY *= -1;
          this.y = canvas.height;
        }
      }
    }
  });
  
  function anim() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  
    objs.forEach(function(o, i) {
      o.update();
      ctx.drawImage.apply(ctx, getTextSprite(i, o.x, o.y));
    })
    requestAnimationFrame(anim);
  }
  anim();
  

  #canvas1 {
    border: 1px solid;
    width: 500px;
    height: 300px;
  }
  

  <canvas id="canvas1" width="500" height="300"></canvas>
  

  回复于 2024-04-26T21:46:32+08:00
• 0

  这是因为：

  var radius = 15;
  
  var cnv = createHiDPICanvas(radius*2, radius*2, 2);
  var ctx = cnv.getContext("2d");
  

  当您将要创建的画布的大小增加到 createHiDPICanvas(2000,2000, ...) 时，移动会平滑 . 现在你're creating a very small resolution canvas (30px by 30px), and the text looks jittery because it'在非常小的像素范围内移动 .

  示例：https://jsfiddle.net/6xr4njLm/

  createHiDPICanvas的更长解释：How do I fix blurry text in my HTML5 canvas?

  回复于 2024-04-26T21:46:32+08:00