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("\u1D120", 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);

你回来了"\uD834\uDD20".

再次感谢Axel Rauschmayer博士的上述代码 - 阅读优秀的链接博客文章了解更多信息.

Answer 2

将十六进制值括在 {} 内，如下所示：

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