画布 context.measureText 无法正常工作答案

【问题标题】：Canvas context.measureText not working properly画布 context.measureText 无法正常工作
【发布时间】：2020-04-01 09:56:48
【问题描述】：

我正在尝试为句子添加背景并将其绘制在画布上。

单击动画按钮时，文本背景（红色）在第一个单词上绘制不正确。当在那个词上安慰 measuretext() 时，值要小得多。

这里是动画和添加文本背景的功能。

const fillMixedText = (canv, ctx, args, x, y) => {
  let defaultFillStyle = "black";
  let defaultFont = "600 54px Arial";
  ctx.save();
  let i = 0;
  args.forEach(({ text, fillStyle, font }) => {


    // console.log("x",x);
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.textBaseline = "top";

    ctx.fillStyle = "red";
      console.log(x,text,ctx.measureText(text).width)
      ctx.fillRect(x, y, ctx.measureText(text).width , 70);

    // console.log(text, ctx.measureText(text).width);
    ctx.fillStyle = fillStyle || defaultFillStyle;

    ctx.font = defaultFont;
    ctx.fillText(text, x, y);
    x += ctx.measureText(text).width;
    i++;
  });
  ctx.restore();
};

这是JSFiddle

我想让整个句子有背景。

【问题讨论】：

问题是什么？你想要红色背景的句子吗？
是的，我希望句子有红色背景

标签： javascript html canvas html5-canvas

【解决方案1】：

measureText 将使用当前设置的font 属性，并且还相对于当前上下文的变换（嗯，至少是它的比例）。

因此，您必须将其与绘制文本的实际设置一起使用，以获得正确的度量：

var canvas = document.getElementById("canvas-1");
var ctx = canvas.getContext("2d");

var args = [
  {text: "constantinople "},
  {text: "is "},
  {text: "a "},
  {text: "city. "}
];


document.getElementById('click').onclick = function() {
  var startTime = new Date().getTime();
  var interval = setInterval(function() {
    if (new Date().getTime() - startTime > 2000) {
      clearInterval(interval);
    }
    ctx.clearRect(0, 0, canvas.width, canvas.width);

    animateText();
  }, 33);

}

var interval;
let distance = 0;
let speed = 15;

function animateText() {
  // interval = setInterval(function() {
  distance = distance + speed;
  textAnimation(
    ctx,
    canvas,
    args, -200,
    canvas.height / 2,
    distance
  ); // console.log(thiscanvas.width/16)
}

textAnimation = (ctx, canv, args, x, y, distance) => {
  if (distance >= 280) {
    distance = 0;
    // clearInterval(interval);
    x = canv.width / 16;
  }

  fillMixedText(canv, ctx, args, x + distance, y);
};

const fillMixedText = (canv, ctx, args, x, y) => {
  let defaultFillStyle = "black";
  let defaultFont = "600 54px Arial";
  ctx.save();
  let i = 0;
  args.forEach(({ text, fillStyle, font }) => {

    // console.log("x",x);
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.textBaseline = "top";

    ctx.fillStyle = "red";
    // set the font first
    ctx.font = defaultFont;
    // now it's correct
    ctx.fillRect(x, y, ctx.measureText(text).width, 70);

    ctx.fillStyle = fillStyle || defaultFillStyle;
    ctx.fillText(text, x, y);

    x += ctx.measureText(text).width;
    i++;
  });
  ctx.restore();
};

canvas {
  border: 2px solid black;
  width: 700px;
  height: 400px;
  margin-left: 30px;
  margin-top: 10px;
}

<canvas id="canvas-1" width="1280px" height="720px"></canvas>
<button id="click">animate</button>

【讨论】：