填充文本不起作用答案

【问题标题】：FillText not working填充文本不起作用
【发布时间】：2013-11-07 14:30:55
【问题描述】：

我无法获取画布上的文本。我在这里做错了什么？

var el = document.getElementById('mycanvas');
var context = el.getContext('2d');

context.globalAlpha = 0.95;
context.beginPath();
context.rect(0, 0, el.width, el.height);
context.fillStyle = "#435a6b";
context.fillText('Hello World',0,0);
context.fill();

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

您正在尝试将 40 磅的文本绘制到一个很小的框中。使框更大或文本更小。

您还在框的左上角绘制文本。文本从基线向上。

如果您将框大小更改为 350 宽和 250 高，并将代码更改为

context.fillText("Hello World", 0, 200);

然后你会看到文字。

Forked and fixed fiddle.

【讨论】：

谢谢你，不知道文字超出了基线
@user1184100 如果要从顶部绘制文本，可以使用context.textBaseline = 'top'。

【解决方案2】：

有多个问题：

画布太小，无法正确绘制文本。
文本与矩形具有相同的fillStyle，因此看不到它。
您在文本之后绘制矩形，因此文本被覆盖。

你可以试试这个代码：

    context.globalAlpha = 0.95;
    context.rect(0, 0, el.width, el.height);
    context.fillStyle = "#435a6b";
    context.fill();
    
    context.font = 'italic 40pt Calibri';
    context.fillStyle = "black";
    context.fillText('Hello World',50,50);

http://jsfiddle.net/qHpt6/

【讨论】：