HTML5 context.fillText html вывод тега

У меня есть холст, и в этом я хочу вывести число, которое работает, но я хочу вывести число с тегом HTML. Вот соответствующая часть кода:HTML5 context.fillText html вывод тега

function createCircle(x, y, text, callback) { 
var radius = 75; 
var endPercent = 3001; 
var curPerc = 0; 
var counterClockwise = false; 
var circ = Math.PI * 2; 
var quart = Math.PI/2; 
var text = '<span class="number">30</span>'; 

context.lineWidth = 10; 
context.strokeStyle = '#ad2323'; 
context.shadowOffsetX = 0; 
context.shadowOffsetY = 0; 

function doText(context, x, y, text) { 
    context.lineWidth = 1; 
    context.fillStyle = "#ad2323"; 
    context.lineStyle = "#ad2323"; 
    context.font = "28px sans-serif"; 
    context.fillText(text, x - 15, y + 5); 
}

Вот Fiddle

источник

2015-02-01 Gamerfritz

И почему вы хотите поместить этот тег HTML в холст? Как это должно выглядеть, и чего вы ожидаете? – adeneo

Мне нужен этот beacause, у меня есть обратный отсчет, который должен отображаться там, и для обратного отсчета я должен получить HTML-тег для работы. – Gamerfritz

Это проблема X/Y, вставка HTML-тега в холст не позволит вам изменить текст с помощью DOM-манипуляции, вы все равно будете перерисовывать холст для этого, и единственный способ рендерить теги на холсте - это SVG, Blobs и т. Д. И является сложным. – adeneo

В общем, вы не можете вынести произвольный HTML на холсте. Тем не менее ...

Если вы искали стиль обратного отсчета с помощью CSS, вы должны скопировать стили и применить их с помощью context.font, context.fillStyle и т. Д. Если вы не знаете стили и не можете их получить, (например: поскольку это значение, предоставленное пользователем), вы можете обойти это, проанализировав атрибуты стиля документа, как показано на рисунке here.

Если вы хотите манипулировать текстом с помощью jQuery или аналогичного, вы должны вместо этого вызвать функцию для перерисовки холста либо каждый раз, когда текст изменяется или используется setTimeout или requestAnimationFrame.

Другой вариант, если вам абсолютно необходимо иметь HTML-тег, состоит в том, чтобы просто позиционировать его поверх холста с помощью position: absolute, left: <x-value>, top: <y-value>.

источник

2015-02-01 11:55:30 jazmit

HTML5 context.fillText html вывод тега

ответ

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