HTML5 Canvas中的textAlign属性在IE 11中不能正常工作

textAlign Property in HTML5 Canvas not working properly in IE 11

本文关键字：常工作 不能 工作 中的 Canvas textAlign 属性 IE HTML5      更新时间：2023-09-26

我试图使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

Test this:

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

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

相关文章：