safari画布中的文本

Question

我在safari画布中绘制文本时遇到问题。它看起来像这个image。这个画布以这样的方式绘制：首先是绘制带有渐变的舞台块，而不是渐变式的谈话块，并且在谈话块中绘制文本，这在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

我得到了同样的错误，但并不总是可重现的（有时画布没问题，有时候不会）。当在页面中绘制几个复杂和大型的画布时，就会出现该错误。看起来，当文本被绘制时，它下面的背景不是正确的。我还发现，如果我使用setTimeout绘制文本，错误发生的次数会减少（不幸的是，在任何情况下它都不会消失）。

Answer 2

请尝试以下JavaScript代码cn.style.webkitFontSmoothing="antialiased";其中，cn是绘制文本的画布。另请参阅Way around font transparency issues on canvas in Safari 5.1 on Lion?