사파리 캔버스의 텍스트

Question

사파리 캔버스에서 텍스트 그리기에 문제가 있습니다. 이 부분은 image과 같습니다. 이 캔버스는 그런 방식으로 그리기 : 먼저 그래디언트가있는 대화 블록보다 그래디언트가있는 스테이지 블록을 그리고 토크 블록에서 사파리의 텍스트가 매우 어리게 보이는 그리기 블록이 그려집니다.

텍스트 그리기위한 코드 :

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

다음 자바 스크립트 코드 cn.style.webkitFontSmoothing="antialiased";을 사용해보십시오. 여기서 cn은 텍스트가 그려지는 캔버스입니다. 또한 Way around font transparency issues on canvas in Safari 5.1 on Lion?