Question

我的加载屏幕上的画布上有文本，但是太小了。我以某种方式找不到正确的语法来更改它的任何资源。

我尝试过：

// 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函数中，所以文本是在画布上绘制的。如果在之后设置了font属性，则仅当您再次绘制它时，画布上存在的文本才会改变。

遵循完整的示例：

//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>

如何更改画布文本的字体大小

1 个答案: