HTML 5 шрифт холста игнорируется

Я пытаюсь написать некоторый текст в элемент canvas, но кажется, что параметры шрифта, которые я вставляю, полностью игнорируются. Независимо от того, к чему я их изменяю, все это выходит так же, что я считаю стандартным 10px sans-serif. Heres, что у меня есть (эта функция работает при нагрузке)HTML 5 шрифт холста игнорируется

function start() 
{ 
    canvas = document.getElementById('c'); 
    ctx = canvas.getContext('2d'); 
    ctx.fillStyle = "white"; 
    ctx.font = "12px monospace"; 
    ctx.textBaseline = "top"; 
}

Это не работает ни в Firefox, ни в Chrome.

источник

2010-07-28 The.Anti.9

Это также случается, если вы передадите строку с плохим форматированием, например '' 12 px monospace'', с дополнительным пространством. – Noumenon

~~Как выясняется, ctx.font изменения должны быть использованы в одной и той же функции, что делает fillText()~~

~~Это делает его работу как шарм.~~

EDIT

Как richtaur упоминалось в комментарии, этот ответ неверен. Контекст должен быть сохранен и восстановлен с использованием ctx.save() и ctx.restore(), поскольку он в настоящее время сбрасывается при повторном вызове canvas.getContext ('2d').

источник

2010-07-28 05:26:19

Я подозреваю, что каждый раз, когда вы повторно приобретаете графический контекст с canvas.getContext ('2d'), вы получаете новый контекст, который сбрасывается по умолчанию. Это имеет смысл, потому что вы выполняете операции рисования и, вероятно, собираетесь отображать все виды текста во всех разных шрифтах и циклически перебирать их при рендеринге каждого фрейма ... поэтому (пере) установка шрифта для каждого нового контекста делает смысл. – Triynko

> Как выясняется, изменение ctx.font должно использоваться в той же функции, которая выполняет fillText() <- Это не так, как это работает. Настройки являются глобальными для этого контекста, поэтому, вероятно, он будет переопределен в вашей другой функции. Вы хотите сделать что-то вроде 'ctx.save()' then 'ctx.restore()', чтобы сохранить состояние вашего контекста. См. Https://developer.mozilla.org/en/Drawing_text_using_a_canvas – richtaur

Это также может произойти, если вы сбросите размер холста. По крайней мере, я видел это в Chrome 23 сегодня.

context.font = 'bold 20px arial'; 
canvas.width = 100; 
canvas.height = 100; 
console.log(context.font); // gives '10px sans-serif'

источник

2012-11-20 21:55:00

Отличный совет! Я потратил на это все время. Почему такие свойства будут сброшены при изменении размера? Мне кажется бессмысленным. – AdrianCooney

HTML 5 шрифт холста игнорируется

ответ

Смежные вопросы