HTML5 context.fillText html 标签输出

Question

我这里有一个 canvas，在这里我想输出一个有效的数字，但我想输出带有 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

Answer 1

一般来说，您不能将任意 HTML 渲染到 canvas。然而...

如果您希望使用 CSS 设置倒计时样式，您应该复制样式并使用 context.font、context.fillStyle 等应用它们。如果您不知道这些样式并且在运行之前无法获取它们（例如：因为这是用户提供的值），您可以通过解析文档样式属性来解决这个问题，如 here.

如果您希望使用 jQuery 或类似的方法来操作文本，您应该在每次文本更改或使用 setTimeout 时调用函数重绘 canvas或 requestAnimationFrame.

如果你绝对必须在那里有一个 HTML 标签，另一种选择是使用 position: absolute, left: <x-value>, top: <y-value>.

将它简单地放置在 canvas 上

HTML5 context.fillText html 标签输出

HTML5 context.fillText html tag output

html

javascript

canvas