Question

我这里有一个画布，在这里我想输出一个有效的数字，但我想用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渲染到画布。然而...

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

如果您希望使用jQuery或类似操作文本，则应在每次文本更改或setTimeout或requestAnimationFrame使用时调用该函数重绘画布。

如果您必须在那里使用HTML标记，则另一个选项是使用position: absolute, left: <x-value>, top: <y-value>将其放置在画布上。

HTML5 context.fillText html标记输出

1 个答案: