Unicode 字符无法在 HTML5 canvas 中正确呈现

Question

我正在尝试使用 HTML5 canvas 元素呈现 unicode 高音谱号。当使用正确的字符代码（特别是 1D120）时，它在 HTML 中显示良好，但是当我尝试在 canvas 中使用它时，会出现一个奇怪的字符

以下代码在我的 javascript 文件中，它在 canvas...

上发挥了它的魔力

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 字符。

从 a blog post by somebody smarter than me 偷来的是这个方便的函数：

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 博士提供的上述代码 — 阅读出色的链接博客 post 了解更多信息。

Answer 2

将十六进制值包含在 {} 中，如下所示：

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

Unicode 字符无法在 HTML5 canvas 中正确呈现

Unicode characters not rendering properly in HTML5 canvas

html

javascript

unicode

canvas

html5-canvas