代码之家 › 专栏 › 技术社区 › Shouvik

基于文本的画布倒计时

canvas html5 javascript

0

Shouvik · 技术社区 · 14 年前

我想在画布上运行文本倒计时,但上次我检查时,无法将文本写入画布。

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

3 回复 | 直到 14 年前

1

2

user372551 14 年前

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

2

1

andrewmu 14 年前

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

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

3

0

Deniz Dogan 14 年前

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