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;

}

Here is a link here

已编辑（截图）：

Chrome

IE

Answer 1

测试一下：

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

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

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

1 个答案: