canvas生成随机（颜色位置）验证码

一、什么是canvas？

1.HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。

2.<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

3.你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

4.canvasc初始宽高300,150

二.功能实现

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

①功能需求：

1.需要的内容：字母数字组合(长度随机5-7,颜色随机,位置随机，大小随机);出现一些干扰信息(线条,圆)。

2.简单实现一下验证。

②代码部分：

1.html+css代码

    <div class="yzm">验证码:</div>
    <canvas width="100" height="50"></canvas>
    <input type="text">
    <button>验证</button>
    <div class="trun1">验证成功</div>
    <div class="false1">验证失败</div>

  canvas {
            background-color: #eee;
            position: relative;
            top: 20px;
            left: 300px;
            border: 1px solid;
        }

        input {
            width: 180px;
            height: 35px;
            font-size: 20px;
        }

        button {
            position: absolute;