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

有多个问题：

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/

Answer 2

您正在尝试将40点文字绘制到一个小框内。使方框变大或使文本变小。

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

如果您将盒子的尺寸更改为350宽，250高的尺寸，并将代码更改为

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

然后您将看到文本。

分叉的小提琴。