在 html 画布中获取光栅化文本

Question

我有一个主画布，我在上面画了另一个画布，上面写着文字。当我看到结果时，似乎文本被光栅化并且不平滑。

这是我尝试过的代码：-

const mainCanvas = document.querySelector('.main');
const mainCanvasContext = mainCanvas.getContext('2d');

const backgroundCanvas = document.createElement('canvas');
backgroundCanvas.width = 1000
backgroundCanvas.height = 1000

const backgroundCanvasContext = backgroundCanvas.getContext('2d');

const run = async() => {
  const title = 'SQUARE'
  const text = title.toUpperCase();

  backgroundCanvasContext.font = '300px KulminoituvaRegular';
  ctx.fillStyle = 'white';
  ctx.fillText(text, 800/2, 30);
  mainCanvasContext.drawImage(backgroundCanvas, 0, 0, mainCanvas.width, mainCanvas.height);
};

run();

.main {
  
  background: blue;
}
@font-face {
font-family: 'KulminoituvaRegular';
src: url('http://www.miketaylr.com/f/kulminoituva.ttf');
}

<canvas width="1000" height="1000" class="main"></canvas>

问题：主画布上绘制的最终文本画布具有模糊/光栅化文本

这是最终结果：-

Answer 1

最肯定的是，您没有在原始脚本中同步画布尺寸 - 导致渲染模糊/像素化。

请记住，

canvas.width

（和高度）不会返回受 CSS 影响的最终宽度。如果您尚未将宽度和高度指定为

<canvas>

元素或脚本中的属性，

canvas.width

和

canvas.height

将返回默认值：300x150。

在下面的示例中，我通过

canvas.getBoundingClientRect()

检索最终尺寸。

const mainCanvas = document.querySelector('.main');
const mainCanvasContext = mainCanvas.getContext('2d');
console.log('original dimensions:', mainCanvas.width, mainCanvas.height)


const backgroundCanvas = document.createElement('canvas');
const backgroundCanvasContext = backgroundCanvas.getContext('2d');

// get dimensions of main canvas
let {
  width,
  height
} = mainCanvas.getBoundingClientRect();
mainCanvas.width = width;
mainCanvas.height = height;
backgroundCanvas.width = width;
backgroundCanvas.height = height;

console.log('synchronized dimensions:', mainCanvas.width, mainCanvas.height)

const run = async() => {

  // load font
  const font = new FontFace("MatterSQ", "url('https://g.webfontfree.com/Code/WOFF/cc/c1/ccc1e1dc515b5e79736e3498cc9f0cf7.woff')", {
    style: "normal",
    weight: "400",
  });

  // wait for font to be loaded
  await font.load();
  // add font to document
  document.fonts.add(font);

  let text = 'SQUARE'
  backgroundCanvasContext.font = '100px MatterSQ';
  backgroundCanvasContext.fillStyle = 'white';
  backgroundCanvasContext.textAlign = "center";
  backgroundCanvasContext.textBaseline = "middle";
  backgroundCanvasContext.fillText(text, width / 2, height / 2);

  //render to main canvas
  mainCanvasContext.drawImage(backgroundCanvas, 0, 0, width, height);
};

run();

.main {
  width: 800px;
  aspect-ratio: 16 / 9;
  background: #ccc;
}

<canvas class="main"></canvas>

此外，您需要等待外部字体完全加载。您可以像这样使用

fontFace

API

  // load font
  const font = new FontFace("MatterSQ", "url('https://g.webfontfree.com/Code/WOFF/cc/c1/ccc1e1dc515b5e79736e3498cc9f0cf7.woff')", {
    style: "normal",
    weight: "400",
  });

  // wait for font to be loaded
  await font.load();
  // add font to document
  document.fonts.add(font);