原生JS实现验证码干扰线和文字原地旋转

前言

​ 后端生成验证码的两个加数，前端渲染验证码，返回相加结果到后端校验。需求方要求要有干扰线等操作。

​ 一般验证码图像后端生成较多，项目这样也只有照着完成需求了。

原来：

整体思路：将原来的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说明

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);