HTML5画布-带有元素的字体样式

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';       
}

我不确定这是我做错了还是无法完成。 我已经尝试过Google搜索一种方法来做到这一点，但还没有找到。

谢谢大家的帮助！

Answer 1

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

if(occasion === 'birthday')

但这可能只是一个简单的type-o。

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

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

例如：“正常的12px Arial”

如果不使用字体，则默认为“正常”。 例如，您可以使用：“ 12px Arial”实现相同的操作

您必须提供font-size和font-family才能设置字体，否则它将忽略该命令，并且我在过去遇到过此问题。

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

var fontSize = document.card.fontSize.value;

var defaultFontSize = 12;

if(!fontSize)
   fontSize = defaultFontSize;

...

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

那应该做到的！

Google“画布参考”，然后点击链接HTML Canvas Reference-W3Schools 。

Answer 2

其他人已经指出了您代码中的错误，因此我将回答这个问题。

这是一个工作的小提琴

对于基本的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);
});

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

另外，这是有关画布字体的MDN文章的链接： https : //developer.mozilla.org/en-US/docs/Drawing_text_using_a_canvas