javascript - 如何更改 Canvas 文本的字体大小

Question

我的 Canvas 加载屏幕上有文本，但它太小了。我不知何故找不到任何有关更改它的正确语法的资源。

我尝试过:

// examples of what i've tried

canvasContext.font(40); 
canvasContext.font(40 + 'px'); 
canvasContext.fontSize(40); 
canvasContext.fontSize(40 + 'px'); 
canvasContext.font = 40; 
canvasContext.font = 40 + 'px'; 
canvasContext.fontSize = 40; 
canvasContext.fontSize = 40 + 'px';

-

//my actual code

window.onload = function () {
    canvas = document.getElementById('gameCanvas');
    canvasContext = canvas.getContext('2d');
}

function colorText(showWords, textX, textY, fillColor, fontSize) {

    //this works -----
    canvasContext.fillStyle = fillColor;
    canvasContext.fillText(showWords, textX, textY);

    //this doesn't ------
    canvasContext.fontSize = 40 + 'px';
}

Answer 1

您应该更改此行:

canvasContext.font= 40 + 'px';

为此:

canvasContext.font = `40px Verdana`;

注意:

不要忘记属性canvasContext.font应该在canvasContext.fillText之前设置!但为什么？因为在 fillText 函数中，文本是在 Canvas 上绘制的。如果之后设置了 font 属性，则 Canvas 上显示的文本不会改变，只有再次绘制时才会改变。

遵循完整的工作示例:

//my actual code

var canvasContext;

window.onload = function () {
    canvas = document.getElementById('gameCanvas');
    canvasContext = canvas.getContext('2d');  
    colorText("Word", 30, 30, "white", "40px");
}

function colorText(showWords, textX, textY, fillColor, fontSize) {
    canvasContext.font = `${fontSize} Verdana`;
    canvasContext.fillStyle = fillColor;
    canvasContext.fillText(showWords, textX, textY);
   
}

canvas {
  background-color: blue;
}

<canvas id="gameCanvas"></canvas>