画布文字没有显示？ - 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)
}

仍在学习javascript，所以不要downvote，因为我是菜鸟:(

Answer 1

• 在使用`overlay（...）;

调用函数之前，必须先定义函数var overlay

• centerx＆amp;中心未定义

• font

缺少字体overlay(...)

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

工作演示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;