Unicode字符在HTML5畫布中無法正確呈現

Question

我正在嘗試使用HTML5 canvas元素渲染一個unicode高音譜號。 當使用正確的字符代碼（特別是1D120）時，它在HTML中渲染得很好，但是當我嘗試在畫布中使用它時會出現一個奇怪的角色

以下代碼在我的javascript文件中，它在畫布上發揮作用......

 var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.font = "48px serif"; context.strokeText("\ᴒ0", 10, 50); 

 <h1>&#x1D120;</h1> <canvas id="canvas" width="100" height="100"> </canvas> 

不幸的是，我不能把這個角色的照片，因為我的代表太低了。

任何洞察可能導致此問題的原因都表示贊賞。 提前致謝！

Answer 1

JavaScript字符串使用UTF-16編碼。 你的角色需要兩部分逃脫，因為它是一個 3字節的UTF-8序列 碼點，需要2個UTF-16字符。

比我更聰明的人從博客文章中偷來的是這個方便的功能：

function toUTF16(codePoint) {
    var TEN_BITS = parseInt('1111111111', 2);
    function u(codeUnit) {
        return '\\u'+codeUnit.toString(16).toUpperCase();
    }

    if (codePoint <= 0xFFFF) {
        return u(codePoint);
    }
    codePoint -= 0x10000;

    // Shift right to get to most significant 10 bits
    var leadSurrogate = 0xD800 + (codePoint >> 10);

    // Mask to get least significant 10 bits
    var tailSurrogate = 0xDC00 + (codePoint & TEN_BITS);

    return u(leadSurrogate) + u(tailSurrogate);
}

當您使用代碼調用它時：

var treble = toUTF16(0x1D120);

你回來了"\?\?" 。

再次感謝Axel Rauschmayer博士的上述代碼 - 閱讀優秀的鏈接博客文章了解更多信息。

Answer 2

將十六進制值括在{}內，如下所示：

context.strokeText("\u{1D120}", 10, 50);