基于文本的画布倒计时

$(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

可以在画布2d中绘制文本。 w3c API documentation 你可以看到 fillText 方法,该方法允许您绘制文本,并且 font 属性允许您控制外观。

请注意:并非所有的Canvas2d实现都支持文本API——我知道iOS过去没有这样做。

This page 这表明在画布上书写文本确实是可能的。