HTML5 Canvas в проблеме Android

1

Я хочу сделать градиентный текст с холстом, и мой компьютер корректно отображает код, но андроид отображает его как обычный градиент с текстом внутри него. Как я могу решить эту проблему, если это возможно?
Здесь javascript:

function text() {
var canvas = document.getElementById('header-text');
var ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 0, 29);
gradient.addColorStop(0, "#fcfcfc");
gradient.addColorStop(1, "#ccc");
ctx.font = "bold 29px helvetica, arial, sans-serif";
ctx.shadowColor = "#232323";
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.fillStyle = gradient;
ctx.fillText("Company name", 0, 23);
}
  • 0
    Можете ли вы добавить код в вопрос? Существует несколько способов сделать градиент для текста.
Теги:
canvas

1 ответ

1
Лучший ответ

Извините, это ошибка.

Или, скорее, градиент для fillText еще не реализован в браузере Android. Если вы пишете это:

var gradient = ctx.createLinearGradient(0, 0, 0, 29);
gradient.addColorStop(0, "#fcfcfc");
gradient.addColorStop(1, "#ccc");
ctx.fillStyle = 'red';
ctx.fillStyle = gradient; // replace the fillstyle with a gradient
ctx.fillText("Testing", 0, 23);
ctx.fillRect(0,0,20,20)

Вы увидите, что и текст, и прямоугольник имеют градиент в Chrome.

Смотрите здесь прямо здесь.

Но на устройстве Android текст будет красным, а прямоугольник будет градиентом!

Сам Chrome по-прежнему не имеет полной поддержки всех случаев градиента холста, которые были изложены автором спецификации (он сам сотрудник Google). Я представил отчет об ошибке здесь.

  • 0
    просто добавить градиент, похоже, не работает и для arc .

Ещё вопросы

Сообщество Overcoder
Наверх
Меню