Я хочу сделать градиентный текст с холстом, и мой компьютер корректно отображает код, но андроид отображает его как обычный градиент с текстом внутри него. Как я могу решить эту проблему, если это возможно?
Здесь 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);
}
Извините, это ошибка.
Или, скорее, градиент для 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). Я представил отчет об ошибке здесь.
arc
.