前言
后端生成验证码的两个加数,前端渲染验证码,返回相加结果到后端校验。需求方要求要有干扰线等操作。
一般验证码图像后端生成较多,项目这样也只有照着完成需求了。
原来:
整体思路:将原来的id改为H5的canvas标签进行绘画。
DEMO
以菜鸟为教程:
<canvas id="code" width="160px" height="42px" style="border-radius: 5px;" class="nocode">验证码</canvas>
//获得画笔
var canvas=document.getElementById('code').getContext('2d');
//绘制画布:颜色1
canvas.fillStyle=ranColor;
canvas.fillRect(0,0,160,42);
//修改canvas颜色:字体颜色2,颜色1画的方块不变
canvas.fillStyle=ranColor2;
canvas.font="28px NSimSun";
//在坐标轴上(左上角原点),绘制文字 x,y
canvas.fillText("Hello " ,0,0);
canvas.strokeText(" World" ,30,0);
画布大小
值得注意的是画布的默认组件大小是300 , 150 。我们如果要设置画布的大小不能在style
里面设置,只能是设置标签属性:width
和height
。
画线
编写画布画线的方法,可设置线条数量:
- moveTo:绘制起点坐标
- lineTo:绘制终点坐标
- lineWidth:线条宽度
- strokeStyle:画笔样式
- stroke:绘制
drawLine(canvas , Math.random()*6);
function drawLine(canvas , lineNum){
for (let i = 0; i < lineNum; i++) {
var ranColor = '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6); //随机生成颜色
canvas.moveTo(Math.random()*160, Math.random()*42);
canvas.lineWidth = 2;
canvas.strokeStyle = ranColor;
canvas.lineTo(Math.random()*160, Math.random()*42);
canvas.stroke();
}
}
function getRandomColor(){
var ranColor = '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6); //随机生成颜色
return ranColor;
}
文字原地旋转
旋转用到两个方法:
-
translate
:平移画布的坐标原点 。 -
rotate
:以坐标原点为轴进行画布下面的操作进行旋转。 (注意是坐标原点为轴, 对画布下面的操作进行旋转——rotate后的操作是旋转的,之前不变)。
整体来说是:translate
将坐标原点移到文字显示区域,然后旋转,再显示文字即可。后面不断的通过translate
去移动坐标点和旋转,来实现对应的文字原地旋转效果。最后还原到原点,重写用来绘制线条。
如果不移动
,同一角度
单独进行旋转将会旋转到画布外面去:
var num1 = data.data.num1;
var num2 = data.data.num2;
code = num1 + num2;
//初始化画布
canvas.fillStyle=ranColor;
canvas.fillRect(0,0,160,42);
//设置画布文本样式
canvas.fillStyle=ranColor2;
canvas.font="28px NSimSun";
//num1:左右旋转
var radius = Math.random()*60 - 30;
canvas.translate(25,30);
canvas.rotate(radius*Math.PI/180);
canvas.fillText(num1 ,0,0);
//回正画布
canvas.rotate((360-radius)*Math.PI/180);
canvas.translate(30,0);
canvas.fillStyle=getRandomColor();
canvas.fillText(" + " ,0,0);
//num2:旋转
radius = Math.random()*60 - 30;
canvas.translate(30,0);
canvas.rotate(radius*Math.PI/180);
canvas.fillStyle=getRandomColor();
canvas.fillText(num2 ,0,0);
//回正画布
canvas.rotate((360-radius)*Math.PI/180);
canvas.translate(30,0);
canvas.fillStyle=getRandomColor();
canvas.fillText(" =? " ,0,0);
//彻底还原画布坐标:(0,0)用于画线
canvas.translate(-115,-30);
drawLine(canvas , Math.random()*6);
效果
附菜鸟demo代码:
transform
transform() 允许缩放、旋转、移动并倾斜当前的画布操作。但是不能扭曲…
setTransform()方法:重置并创建新的变换矩阵,再次绘制。而transform会累积变化。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="black";
ctx.font="28px NSimSun";
ctx.fillRect(0,0,250,100)
ctx.fillStyle="red";
ctx.transform(1,0.6,0.5,1,0,0);
ctx.fillText("长臂人猿" ,20,40);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wg9oR8kX-1634118902658)(
image-20211013165929190.png)]
rotate & translate
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(0,0,400,100);
ctx.fillStyle="red";
ctx.font="28px NSimSun";
var jd = Math.random()*60;
ctx.rotate(jd*Math.PI/180);
ctx.translate(30,30);
ctx.fillText("hello" ,0,0);
ctx.rotate((360-jd)*Math.PI/180);
ctx.fillText(" + " ,80,0);
ctx.rotate((Math.random()*16)*Math.PI/180);
ctx.translate(90,0)
ctx.fillText(" world " ,0,0);