基于文本的画布倒计时

Question

我想在画布上运行文本倒计时，但最后我检查了没有办法将文字写入画布。

我想知道是否有其他人遇到过我可以在画布上从60到0进行数字倒计时的实现。

Answer 1

$(function () {
    var width = 200;
    var height = 200;
    $('canvas').width(width).height(height);
    var ctx = $('canvas')[0].getContext('2d');
    var i = 60;
    (function draw() {
        with(ctx) {
            fillStyle = '#000';
            fillRect(0, 0, width, height);
            fillStyle = '#0f0';
            font = 'bold 20px Arial';
            fillText(i, 100, 50)
            fill();
        }
        if (!(i--)) return;
        setTimeout(draw, 1000);
    })();
});

see in action

Answer 2

可以在画布2D中绘制文本。如果查看w3c API documentation，您可以在上下文中看到允许您绘制文本的fillText方法，font属性可让您控制外观。

请注意：并非所有画布2D实现都支持文本API - 我知道iOS过去没有这样做。

Answer 3

This page表明确实可以在画布上书写文字。