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