填充文本不起作用

FillText not working

本文关键字：不起作用 文本 填充      更新时间：2023-09-26

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

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

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

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

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

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

然后你会看到文本。

分叉和固定小提琴。

存在多个问题：

  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/

相关文章：