javascript - FillText not working

Question

I'm unable to get the text on the canvas. What am I doing wrong here ?

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

然后你会看到文字。

分叉和固定的小提琴。

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/