canvas 数字递增

实现数字递增的效果，可以使用 Canvas 来绘制数字，并通过定时器来更新数字的值。以下是一个简单的实现方式：

HTML：

<canvas id="canvas"></canvas>

JavaScript：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var num = 0; // 初始数字
var target = 100; // 目标数字
var duration = 1000; // 动画时长（毫秒）
var interval = 10; // 更新间隔（毫秒）
var steps = duration / interval; // 更新次数
var increment = (target - num) / steps; // 每次更新的增量

var current = 0; // 当前更新次数
var timer = setInterval(function() {
    current++;
    num += increment;
    if (current >= steps) {
        clearInterval(timer);
        num = target;
    }
    drawNumber(num);
}, interval);

function drawNumber(num) {
    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 设置字体样式
    ctx.font = "bold 48px Arial";
    // 设置文本对齐方式为居中
    ctx.textAlign = "center";
    // 设置文本基线为中心线
    ctx.textBaseline = "middle";
    // 绘制文本
    ctx.fillText(Math.round(num), canvas.width / 2, canvas.height / 2);
}

在上面的代码中，我们通过 `setInterval` 方法来定时更新数字的值，然后调用 `drawNumber` 方法来绘制数字。在 `drawNumber` 方法中，我们使用 `ctx.font` 属性来设置字体样式，使用 `ctx.textAlign` 属性来设置文本对齐方式，使用 `ctx.textBaseline` 属性来设置文本基线，最后使用 `ctx.fillText` 方法来绘制文本。

需要注意的是，数字递增的效果并不是通过 Canvas 实现的，而是通过 JavaScript 中定时器的方式实现的。Canvas 只是用来绘制数字而已。