画布文字未显示？ - JavaScript

Question

我正在使用ctx.fillText 函数在我的屏幕上绘制文本，但它似乎没有出现。

overlay("rgb(50, 50, 200)", "This is the beginning screen", 48, "black", "center", centerx, centery)

var overlay = function(colour, text, font, size, fontColour, oreintation, x, y){
    ctx.font = size + "px " + font + " " + fontColour
    ctx.textAlign = oreintation
    ctx.fillStyle = colour
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)
    ctx.fillText(text, x, y)
}

Answer 1

• 您必须先定义您的函数var overlay，然后才能使用 `overlay(...);

• centerx & centery 未定义

• overlay(...) 中缺少字体 font

• 背景填充与文本填充颜色相同，因此文本不显示

工作演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;


var overlay = function(colour, text, font, size, fontColour, oreintation, x, y){
  ctx.font = size + "px " + font + " " + fontColour
  ctx.textAlign = oreintation
  ctx.fillStyle = colour
  ctx.fillStyle='gold';
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)
  ctx.fillStyle=fontColour,
  ctx.fillText(text, x, y)
}

overlay(
  "rgb(50, 50, 200)", 
  "This is the beginning screen",
  'verdana', 
  48, 
  "black", 
  "center", 
  25,
  50
);

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>