Question

我想知道是否可以使用用户提交的元素，并在HTML5画布中创建文本时将该选项调整为字体。

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

这是一个单选按钮作为示例（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';       
}

我不确定这是不是我做错了什么或者是不是可能的事情。我已经尝试过谷歌搜索方法来做到这一点，但还没找到。

感谢所有人的帮助，伙计们！

Answer 1

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

if(occasion === 'birthday')

但那可能只是一个简单的类型-o。

除此之外，你要做的就是绝对可能！我过去做过类似的事情，我必须说，你的项目听起来很酷。

您可能遇到的问题是＆＃34; font＆＃34;的语法。为了将字体设置为画布的上下文，您需要满足三个参数：font-variant;字体大小;和font-family。

一个例子是：＆＃34;正常12px Arial＆＃34;

如果您退出font-variant，它将默认为＆＃34; normal＆＃34;。例如，您可以使用：＆＃34; 12px Arial＆＃34;实现同样的目标

您必须提供font-size和font-family才能设置字体，否则会忽略该命令，而且我以前遇到过这个问题。

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

var fontSize = document.card.fontSize.value;

var defaultFontSize = 12;

if(!fontSize)
   fontSize = defaultFontSize;

...

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

那应该这样做！

Google＆＃34;画布参考＆＃34;，然后点击链接HTML Canvas Reference - W3Schools。

Answer 2

其他人已经在你的代码中指出了错误，所以我只想回答这个问题。

这是一个有效的Fiddle

对于基本HTML，我使用表单来保持简单：

<form name="myForm">
    <label><input type="text" name="myText" /> Text To Show</label>
    <label><input type="radio" name="font" value="Arial" checked /><span style="font-family: arial;">Arial</span></label>
    <label><input type="radio" name="font" value="Courier New" /><span style="font-family: Courier New;">Courier New</span></label>
</form>

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

这为用户提交的文本字符串提供了选项，只提供了两种不同的字体。

这是用于将事件附加到单选按钮和文本字段的JavaScript代码：

var radios = document.myForm.font,
    cvs = document.getElementById('myCanvas'),
    ctx = cvs.getContext('2d');

for (var i = 0; i < radios.length; i++) {
    radios[i].addEventListener('click', function() {
        ctx.clearRect(0, 0, 300, 300);
        ctx.font = '16pt ' + document.querySelector('input[name="font"]:checked').value;
        ctx.fillText(document.myForm.myText.value, 20, 20);
    });
}

document.myForm.myText.addEventListener('input', function() {
    ctx.clearRect(0, 0, 300, 300);
    ctx.font = '16pt ' + document.querySelector('input[name="font"]:checked').value;
    ctx.fillText(document.myForm.myText.value, 20, 20);
});

此外，由于两个事件侦听器中的代码都是相同的，因此您可以将其重构为自己的函数而不是重复它。

此外，这里还有关于canvas字体的MDN文章的链接：https://developer.mozilla.org/en-US/docs/Drawing_text_using_a_canvas

HTML5 Canvas - 带元素的字体样式

2 个答案: