Canvas 文字没有显示？ - 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>

Canvas 文字没有显示？ - JavaScript

Canvas text not showing? - JavaScript

javascript

text

canvas