strokeStyle
strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。
fillRect
fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。传入四个参数,前两位-x,y坐标,后两位-矩形宽高.
clearRect
clearRect() 方法清空给定矩形内的指定像素。可用于清空画布,多个验证码带有透明度的情况下,可能会发生重叠
moveTo
moveTo(x,y); 移动至路径的目标位置的 x ,y坐标
verify.vue
<template>
<div class="img-verify">
<canvas ref="verify" width="112" height="48" @click="handleDraw"></canvas>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import api from '@/api';
//后台请求到的动态验证码
const getVerifyCode = () => {
api.get('getVerifyCode', {}).then((res: any) => {
let str = res.toString();
state.pool = str.split('');
state.imgCode = draw();
});
};
//初始化调用验证码
getVerifyCode();
const verify = ref({});
const state = reactive({
pool: [], // 字符串
//验证码宽高
width: 112,
height: 48,
imgCode: '',
});
onMounted(() => {
// 初始化绘制图片验证码
});
// 点击图片重新绘制
const handleDraw = () => {
getVerifyCode();
// state.imgCode = draw();
};
// 随机数
const randomNum = (min: any, max: any) => {
return parseInt(Math.random() * (max - min) + min, 10);
};
// 随机颜色
const randomColor = (min: any, max: any) => {
const r = randomNum(min, max);
const g = randomNum(min, max);
const b = randomNum(min, max);
return `rgb(${r},${g},${b})`;
};
// 绘制图片
const draw = () => {
// 3.填充背景颜色,背景颜色要浅一点
const ctx = verify.value.getContext('2d');
// 重置画布
ctx.clearRect(0, 0, 112, 48);
// 填充颜色
ctx.fillStyle = `rgba(76,155,255,0.5)`;
// 填充的位置
ctx.fillRect(0, 0, state.width, state.height);
// 定义paramText
let imgCode = 'p';
// 4.随机产生字符串,并且随机旋转
for (let i = 0; i < 6; i++) {
// 随机的四个字
const text = state.pool[i];
imgCode += text;
// 随机的字体大小
const fontSize = randomNum(24, 45);
// 字体随机的旋转角度
const deg = randomNum(-30, 30);
/*
* 绘制文字并让四个文字在不同的位置显示的思路 :
* 1、定义字体
* 2、定义对齐方式
* 3、填充不同的颜色
* 4、保存当前的状态(以防止以上的状态受影响)
* 5、平移translate()
* 6、旋转 rotate()
* 7、填充文字
* 8、restore出栈
* */
ctx.font = `${fontSize}px Simhei`;
ctx.textBaseline = 'top';
ctx.fillStyle = '#FFFFFF';
/*
* save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。
* 这就允许您临时地改变图像状态,
* 然后,通过调用 restore() 来恢复以前的值。
* save是入栈,restore是出栈。
* 用来保存Canvas的状态。save之后,可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。 restore:用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。
*
* */
ctx.save();
ctx.translate(30 * i + 15, 15);
ctx.rotate((deg * Math.PI) / 180);
// fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。
// 请使用 font 属性来定义字体和字号,并使用 fillStyle 属性以另一种颜色/渐变来渲染文本。
// context.fillText(text,x,y,maxWidth);
ctx.fillText(text, -15 + 5, -15);
ctx.restore();
}
// 5.随机产生n个方块,干扰线的颜色要浅一点
// 也可以使用lineTo方法来绘制线条
for (let i = 0; i < 8; i++) {
const width = randomNum(5, 12);
ctx.beginPath();
ctx.fillStyle = 'rgba(118,179,255,0.8)';
ctx.moveTo(randomNum(0, state.width), randomNum(0, 100));
ctx.fillRect(randomNum(0, 112), randomNum(10, 40), width, width);
//lineTo(x,y,w,h)线条
ctx.strokeStyle = randomColor(150, 200);
ctx.closePath();
ctx.stroke();
}
// 6.随机产生40个干扰的小点
// for (let i = 0; i < 40; i++) {
// ctx.beginPath();
// ctx.arc(randomNum(0, state.width), randomNum(0, state.height), 1, 0, 2 * Math.PI);
// ctx.closePath();
// ctx.fillStyle = randomColor(150, 200);
// ctx.fill();
// }
return imgCode;
};
</script>
<style scoped>
.img-verify {
width: 5.83vw;
height: 5.12vh;
cursor: pointer;
}
</style>