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

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

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
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, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing