Текст в холсте сафари

У меня проблема с рисованием текста в холсте сафари. Это выглядит как изображение . Этот холст рисует таким образом: сначала рисует блок сцены с градиентом, а блок разговора с градиентом тоже, а в блоке разговора рисуется текст, который в сафари выглядит очень агрессивно.

The code for drawing the text :

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);
} 

The code for drawing the talk gradient block:

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();
}
1
добавлено отредактировано
Просмотры: 1
nl ja de
У вас есть какой-либо код или живой образец, который вы можете нам показать?
добавлено автор Cerbrus, источник

2 ответы

Try the following JavaScript code cn.style.webkitFontSmoothing="antialiased"; where cn is the canvas where the text is drawn. See also Way around font transparency issues on canvas in Safari 5.1 on Lion?

2
добавлено
Это должен быть принятый ответ, он исправил проблему.
добавлено автор Kong, источник

У меня такая же ошибка, но не всегда воспроизводимая (иногда холст в порядке, иногда нет). Ошибка возникает, когда на странице рисуется несколько сложных и больших холстов. Похоже, что когда текст рисуется, фон под ним не является правильным. Я также обнаружил, что если я нарисую текст с помощью setTimeout, количество ошибок, которое будет происходить, уменьшилось (к сожалению, оно никуда не исчезает).

0
добавлено
Благодарю. Но для меня странно, что такое поведение происходит только в сафари на iMac и на всех других устройствах в Safari холст выглядит хорошо. Зачем?
добавлено автор Kris, источник