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

Question

我正在尝试在画布中制作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;

}

这是一个链接

编辑(截图):

铬

IE

Answer 1

测试一下：

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

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