safari画布中的文本

Question

我有一个在safari canvas中绘制文本的问题。就像在这张图上。这种画布绘制方式是这样的:首先是绘制渐变的舞台块，然后是渐变的谈话块，在谈话块中绘制文本，这在safari中看起来很丑。

绘制文本代码:

function drawTimeInTalk(ctx, x, y, text) {
    ctx.fillStyle = '#000';
    ctx.font = "12px arial, sans-serif";
    ctx.textBaseline = 'alphabetic';
    ctx.fillText(text, x, y);
}

绘制阶段渐变块的代码:

function fillGradRect(context, x, y, w, h, start_color, finish_color) {
    var grad = context.createLinearGradient(x, y, x, y + h);
    if (!start_color || !finish_color) {
        start_color = '#cbcbcb';
        finish_color = '#e5e5e5';
    }
    grad.addColorStop(0, start_color);
    grad.addColorStop(1, finish_color);
    context.fillStyle = grad;
    context.fillRect(x, y, w, h);
} 

绘制对话渐变块的代码:

function roundFillGradRect(context, x, y, w, h, radius, start_color, finish_color) {
    var grad = context.createLinearGradient(x, y, x, y + h);
    if (!start_color || !finish_color) {
        start_color = '#ffffff';
        finish_color = '#eeeeee';
    }
    grad.addColorStop(0, start_color);
    grad.addColorStop(1, finish_color);
    var r = x + w;
    var b = y + h;
    context.beginPath();
    context.fillStyle = grad;
    context.lineWidth = "1";
    context.moveTo(x + radius, y);
    context.lineTo(r - radius, y);
    context.quadraticCurveTo(r, y, r, y + radius);
    context.lineTo(r, y + h - radius);
    context.quadraticCurveTo(r, b, r - radius, b);
    context.lineTo(x + radius, b);
    context.quadraticCurveTo(x, b, x, b - radius);
    context.lineTo(x, y + radius);
    context.quadraticCurveTo(x, y, x + radius, y);
    context.fill();
}

Answer 1

尝试以下javascript代码cn.style.webkitFontSmoothing="antialiased";，其中cn是绘制文本的画布。也见围绕字体透明度问题在画布上的Safari 5.1上的狮子?

Answer 2

我得到了同样的错误，但并不总是可重复的(有时画布是好的，有时不是)。当在页面中绘制多个复杂且较大的画布时，会出现该错误。似乎在画文字的时候，它下面的背景是不对的。我还发现，如果我使用setTimeout绘制文本，错误发生的时间减少了(不幸的是，它在任何情况下都不会消失)。