一、什么是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; top: 29px; left: 416px; width: 80px; height: 50px; font-size: 20px; } .yzm { position: absolute; top: 35px; left: 30px; font-size: 26px; } .trun1{ background-color:aqua; width: 189px; height: 20px; text-align: center; position: absolute; left: 115px; display: none; } .false1{ background-color:red; width: 189px; height: 20px; text-align: center; position: absolute; left: 115px; display: none; }2.js代码
var mixin = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNIPQRSTUVWXYZ" // 获取画布 var canvas = document.getElementsByTagName('canvas')[0]; //获取画笔 var ctx = canvas.getContext('2d'); //用来存储验证码 var verify="" //随机验证码的个数 var random = parseInt(getRandom(5, 5)); // 用来控制验证码出现的位置 var offx = 0; for (var i = 0; i < random; i++) { //入栈，保存之前画布的设置 ctx.save() var text = texts(); //随机字体的大小 ctx.font = `${getRandom(15, 30)}px 楷体` // 随机字体的颜色 ctx.fillStyle = `${getRandomColor()}` // ctx.rotate(Math.PI/180*30); //基线 //控制文字的倾斜 if(i%2){ ctx.rotate(Math.PI/180*10) }else{ ctx.rotate(-Math.PI/180*10) } //文字的对齐方式：top文本基线在文本块的顶部。 ctx.textBaseline = 'top'; // 对文本进行渲染 ctx.fillText(text, offx, getRandom(0, 20)) //文本文字进行递增 offx += 20 //存储验证码，方便验证 verify+=text; //出栈恢复为画笔入栈时的状态 ctx.restore(); } //干扰线 //线的起点 ctx.moveTo(getRandom(0, 20), getRandom(0, 50)); //线的终点 ctx.lineTo(getRandom(80, 100), getRandom(0, 50)); //对线进行连接 ctx.closePath(); //进行渲染 默认黑色 ctx.stroke(); ctx.moveTo(getRandom(0, 100), getRandom(0, 10)); ctx.lineTo(getRandom(0, 100), getRandom(40, 50)); ctx.closePath(); ctx.stroke(); //干扰圆 //创建一个新的路径 ctx.beginPath(); ctx.arc(getRandom(25, 75), getRandom(10, 40), getRandom(4, 25), 0, Math.PI * 2); ctx.stroke(); // console.log(verify); //验证 var ipt = document.getElementsByTagName('input')[0]; var btn = document.getElementsByTagName('button')[0]; var trun1 =document.getElementsByClassName('trun1')[0]; var false1 =document.getElementsByClassName('false1')[0]; console.log(trun1); btn.onclick = function(){ var value = ipt.value; value =value.toLowerCase(); verify = verify.toLowerCase(); console.log(verify); // console.log(verify); // console.log(value); if(verify == value){ // console.log("32222"); trun1.style.display = 'block' false1.style.display = 'none' }else{ false1.style.display = 'block' trun1.style.display = 'none' } } //封装一个获取随机的验证码 function texts() { var index = Math.floor(Math.random() * (mixin.length - 1)); return mixin[index]; } //封装一个随机数 function getRandom(min, max) { return Math.random() * (max - min) + min; } //封装一个随机颜色 function getRandomColor() { return `rgb(${getRandom(0, 255)},${getRandom(0, 255)},${getRandom(0, 255)})` }
三、canvas方法总结
1.线条 开始moveTo() 结束 lineTo()
2.矩形 1.rect(x.y,w,h)2.fillRect()3.strokeRect()
3.圆弧arc（x,y,r,起始弧度，结束弧度，方向）方向1逆时针2顺时针 默认顺时针
4.文本 strokeText()，fillText() 文本基线：textBaseline
5.阴影效果shadowColor shadowBlur shadowOffsetX shadowOffsetY
6.圆角矩形 arcTo(x1, y1, x2, y2, radius)
7.画笔样式 fillStyle = '颜色' 设置填充填充样式； strokeStyle = '颜色' 描边颜色；lineWidth = '10' 描边线条的宽度；font = '20px 宋体'； stroke() 进行描边渲染；fill() 进行填充渲染；beginPath() 重新开启一个路径；closePath() 闭合当前路径。
8.保存和恢复 save() 保存当前画布的属性的状态，存入栈中；restore() 从栈中出栈，将画布的状态进行恢复；
9.绘制图片 drawImage(img,x,y,w,h)
10.清画布 clearRect(x, y, width, height);、
最后，欢迎大家指正补充