canvas随机数字验证码

生成随机数字验证码可以使用canvas来实现，具体实现步骤如下：

1. 创建canvas元素，并设置宽高和样式。
2. 获取canvas的上下文对象context。
3. 设置绘制文本的样式，包括字体、大小、颜色等。
4. 使用Math.random()函数生成随机数，并将其转换为整数。
5. 使用context.fillText()函数将生成的随机数绘制在canvas中。
6. 使用context.beginPath()和context.moveTo()函数绘制干扰线，增加验证码的复杂度。
7. 使用context.stroke()函数将干扰线绘制到canvas中。
8. 使用context.closePath()函数结束绘制。

下面是一个简单的例子，演示如何生成随机数字验证码：

<canvas id="canvas" width="100" height="30" style="border:1px solid #ccc;"></canvas>
<script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var code = "";
    var codeLength = 4;
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;
    var colorList = ["#FF0000", "#00FF00", "#0000FF", "#FF00FF", "#00FFFF", "#FFFF00"];

    // 设置绘制文本的样式
    context.font = "bold 20px Arial";
    context.textBaseline = "middle";
    context.fillStyle = colorList[Math.floor(Math.random() * colorList.length)];

    // 绘制随机数字
    for (var i = 0; i < codeLength; i++) {
        var randomNum = Math.floor(Math.random() * 10);
        code += randomNum;
        context.fillStyle = colorList[Math.floor(Math.random() * colorList.length)];
        context.fillText(randomNum, i * canvasWidth / codeLength + 10, canvasHeight / 2);
    }

    // 绘制干扰线
    for (var i = 0; i < 6; i++) {
        context.beginPath();
        context.strokeStyle = colorList[Math.floor(Math.random() * colorList.length)];
        context.moveTo(Math.random() * canvasWidth, Math.random() * canvasHeight);
        context.lineTo(Math.random() * canvasWidth, Math.random() * canvasHeight);
        context.stroke();
        context.closePath();
    }
</script>

你可以将上面的代码复制到一个HTML文件中，然后在浏览器中打开该文件，即可看到生成的随机数字验证码。