Question

我正在尝试使用HTML5画布构建一个像meme生成器这样的简单工具。是否可以在画布上使用移动电话上的本地字体（这是针对移动设备的目标）？

Answer 1

@Akxe正确回答你可以.fillText使用本地字体在html5画布上绘制。

从各种互联网字体主机中提取必要的字体也很常见。

以下是如何下载网络字体的示例。在html5画布上绘制它：

// load google font == Monoton
WebFontConfig = {
  google:{ families: ['Monoton'] },
  active: function(){start();},
};
(function(){
  var wf = document.createElement("script");
  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js';
  wf.async = 'true';
  document.head.appendChild(wf);
})();


var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

function start(){
  ctx.font = '40px Monoton';
  ctx.textBaseline = 'top';
  ctx.fillText('Monoton    Font', 20, 10);
  var width=ctx.textMetrics('No').width;
  console.log(width);
}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<h4>"Monoton" font drawn on canvas is a downloaded web font</h4>
<canvas id="canvas" width=400 height=100></canvas>

Answer 2

您可以为画布指定任何字体。您应该能够键入CSS可以接受的任何内容

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "Arial 30px";

在绘制html5画布文本时使用本地字体

2 个答案: