FillText无法正常工作

Question

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

JSFiddle - http://jsfiddle.net/qHpt6/

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();

Answer 1

你试图将40点文字画成一个小小的盒子。使框更大或文本更小。

您还在框的左上角绘制文字。该文字从基线开始向上。

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

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

然后你会看到文字。

Forked and fixed fiddle.

Answer 2

存在多个问题：

1. 画布太小太正确无法绘制文字。
2. 文本与矩形具有相同的fillStyle，因此无法看到它。
3. 您在文本后绘制矩形，以便覆盖文字。

您可以尝试以下代码：

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/