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?