一、什么是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;