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

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

基本上，我正在制作一个“创建您自己的贺卡”页面，其中用户可以选择四种不同的字体

以下是一个单选按钮示例（HTML）：

我不确定是我做错了什么，还是根本不可能。我尝试过谷歌搜索一种方法来实现这一点，但还没有找到

---

谢谢你们的帮助，伙计们

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

if(occasion === 'birthday')

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

除此之外，你想做的是完全可能的！我过去也做过类似的事情，我必须说，你的项目听起来很酷

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

例如：“普通12px Arial”

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

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

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

var fontSize = document.card.fontSize.value;

var defaultFontSize = 12;

if(!fontSize)
   fontSize = defaultFontSize;

这就应该做到了

---

谷歌“canvas reference”，点击链接。

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

这是一张工作票

对于基本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>

要显示的文本
Arial
信使新

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

下面是将事件附加到单选按钮和文本字段的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);
});

var radios=document.myForm.font，
cvs=document.getElementById（'myCanvas'），
ctx=cvs.getContext（'2d'）；
对于（变量i=0；i

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

---

此外，这里还有一个指向画布字体上的MDN文章的链接：

场合=“生日”

标签在HTML5中被弃用。使用可执行此操作（

style

attributes可以提供帮助）。另外，JSFiddle或类似的东西也会有所帮助。如果这些都在带有

name=“card”

的表单中，则执行

document.forms.card.[name].value

.As@ಠ_ಠ 也就是说，if语句的逻辑运算符不正确。使用a=将变量时机设置为“生日”，而使用==将时机与“生日”进行比较。哇！非常感谢你！事实证明，我的主要问题是没有意识到，按照我的设置方式，字体大小和字体系列之间没有任何空间。画布调用可能会变得棘手，但我喜欢使用画布，我实际上为US Steel编写了许多画布应用程序，并遇到了许多类似的问题。看看我发给你的链接，这是一个很好的标记，你可以用Canvas做任何事情。不过，作为一个警告，Canvas在不同浏览器中的工作方式不同，非常不同。我不知道为什么我在chrome上总是失败。您还应该查看SVG。它得到了更多的跨浏览器支持。

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

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

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