javascript - HTML5 Canvas 中的 textAlign 属性在 IE 11 中无法正常工作

Question

我正在尝试在 canvas 中制作 javascript 填充文本，我希望它居中对齐，它在 Chrome 和 Firefox 中运行良好但在 IE 中表现得很奇怪，这是代码

    ctx.drawImage(background,space,0,500,500);

    ctx.fillStyle="#FFF";
    ctx.font="40px Droid Arabic Kufi";
    ctx.textAlign = 'center';
    ctx.direction = 'rtl';
    ctx.textBaseline = 'middle';          
    if (x == '') {x = 'شعورك تجاه بيتك سيظهر هنا'}
    firstLineHeight = wrapText(ctx, x, 250, 200, 400, lineHeight);
    ctx.font="20px Droid Arabic Kufi";
    if (ss == '') {sss = 'من: اسمك سيظهر هنا'}
    else {sss = 'من: ' +  ss}
    wrapText(ctx, sss, 250, 250+((firstLineHeight-1)*30), 400, lineHeight);



    function wrapText(context, text, x, y, maxWidth, lineHeight) {

    var words = text.split(' ');
    var line = '';
    linesCount = 1;   
    for(var n = 0; n < words.length; n++) {
    var testLine = line + words[n] + ' ';
    var metrics = context.measureText(testLine);
    var testWidth = metrics.width;
        if (testWidth > maxWidth && n > 0) {
            context.fillText(line, x, y);
            line = words[n] + ' ';
            y += lineHeight;
            linesCount++;
        }
        else {
            line = testLine;
        }
    }

    context.fillText(line, x, y+10);
    return linesCount;

}

Here is a link here

编辑(截图):

Chrome

IE

Answer 1

测试这个:

<canvas id="myCanvas" dir="rtl"></canvas>

直接在 canvas 元素中使用 dir="rtl"..