javascript - HTML5 Canvas - 带有元素的字体样式

Question

我想知道在 HTML5 Canvas 中创建文本时是否可以采用用户提交的元素并调整该选择以适应字体。

本质上，我正在制作一个“创建您自己的贺卡”页面，其中用户的选项之一是在四种不同的字体之间进行选择。

以下是其中一个单选按钮的示例 (HTML):

<input type="radio" id="font" name="font" value="arial" /><font face="Arial">Arial</font>

然后这是我尝试使用(Javascript)设置字体的代码块:

var recipient = document.card.recipient.value;
var giver = document.card.giver.value;
var occasion = document.card.occasion.value;
var font = document.card.font.value;

var imageObj = new Image();

if (occasion = 'birthday') {
    context.font = font;
    context.fillStyle = 'black';
    context.fillText('Happy Birthday, ' + recipient + '!', 10, 25); 
    imageObj.onload = function() {
        context.drawImage(imageObj, 50, 125);
    };
    imageObj.src = 'images/birthday.png';       
}

我不确定是我做错了什么还是这是不可能的事情。我已尝试在 Google 上搜索一种方法来执行此操作，但尚未找到。

感谢大家的帮助!

Answer 1

首先，您在 if 语句中使用了错误的运算符。应该是:

if(occasion === 'birthday')

但这可能只是一个简单的输入。

除此之外，您正在尝试做的事情绝对是可能的!我过去做过类似的事情，我必须说，你的项目听起来很酷。

您可能遇到的问题是“字体”的语法。为了将字体设置为 Canvas 的上下文，您需要满足三个参数:font-variant;字体大小;和字体系列。

一个例子是:“正常 12px Arial”

如果您忽略字体变体，它将默认为“正常”。例如，您可以使用:“12px Arial”来实现相同的效果

您必须提供字体大小和字体系列才能设置字体，否则，它将忽略该命令，我过去也遇到过这个问题。

我建议将变量设置为默认字体大小，并在页面上为所需元素的字体大小设置另一个选择。如果用户尚未选择字体大小，只需将默认字体大小的值附加到字体字符串并使用它即可。

var fontSize = document.card.fontSize.value;

var defaultFontSize = 12;

if(!fontSize)
   fontSize = defaultFontSize;

...

context.font = fontSize + 'px ' + font;

这样就可以了!

Google“ Canvas 引用”，然后单击链接 HTML Canvas Reference - W3Schools .