<template>
<div>
<canvas class="mycanvas" width="80" height="40">抱歉,您的浏览器不支持canvas元素,换个浏览器试试?canvas>
div>
template>
<script>
export default {
data() {
return {
value: "",
code: "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
};
},
mounted() {
this.fourCode();
},
methods: {
randomColor() {
//得到随机的颜色值
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
},
fourCode() {
this.value="";
for (let a = 0; a < 4; a++) {
this.value += this.code1();
}
this.doDraw();
},
code1() {
let index = Math.floor(Math.random() * (this.code.length - 1) + 1);
return this.code[index];
},
doDraw() {
var x = 20;
var y = 20 + Math.random() * 8;
var deg = (Math.random() * 30 * Math.PI) / 180;
// 获取canvas
var canvas = document.getElementsByClassName("mycanvas");
canvas[0].width=canvas[0].width;//清空画布
canvas[0].height=canvas[0].height;
var canvas_width = canvas[0].width;
var canvas_height = canvas[0].height;
var context = canvas[0].getContext("2d");
context.font = "bold 23px 微软雅黑";
context.fillText(this.value, 15, 30);
context.translate(x, y); //canvas原点的偏移量
context.rotate(deg); //旋转度数
context.fillStyle = this.randomColor(); //设置颜色
context.strokeStyle = this.randomColor(); //设置颜色
context.rotate(-deg);
context.translate(-x, -y);
for (var i = 0; i <= 15; i++) {
//验证码上显示线条
context.strokeStyle = this.randomColor(); //轮廓风格
context.beginPath();
context.moveTo(
Math.random() * canvas_width,
Math.random() * canvas_height
);
context.lineTo(
Math.random() * canvas_width,
Math.random() * canvas_height
);
context.stroke();
}
for (var i = 0; i <= 30; i++) {
//验证码上显示小点
context.strokeStyle = this.randomColor();
context.beginPath(); //新建一条路径
var x = Math.random() * canvas_width;
var y = Math.random() * canvas_height;
context.moveTo(x, y); //吧画笔移动到指定位置
context.lineTo(x + 1, y + 1); //想指定位置移动
context.stroke();
}
}
}
};
script>
<style>
.mycanvas {
border: 1px solid rgb(199, 198, 198);
border-radius: 20%;
}
style>
export default {
data() {
return {
value:
"",
code:
"1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
};
},
mounted() {
this.fourCode();
},
methods: {
randomColor() {
//得到随机的颜色值
var r = Math.floor(Math.random() *
256);
var g = Math.floor(Math.random() *
256);
var b = Math.floor(Math.random() *
256);
return "rgb(" + r +
"," + g +
"," + b +
")";
},
fourCode() {
this.value=
"";
for (
let a =
0; a <
4; a++) {
this.value +=
this.code1();
}
this.doDraw();
},
code1() {
let index = Math.floor(Math.random() * (
this.code.length -
1) +
1);
return this.code[index];
},
doDraw() {
var x =
20;
var y =
20 + Math.random() *
8;
var deg = (Math.random() *
30 * Math.PI) /
180;
// 获取canvas
var canvas = document.getElementsByClassName(
"mycanvas");
canvas[
0].width=canvas[
0].width;
//清空画布
canvas[
0].height=canvas[
0].height;
var canvas_width = canvas[
0].width;
var canvas_height = canvas[
0].height;
var context = canvas[
0].getContext(
"2d");
context.font =
"bold 23px 微软雅黑";
context.fillText(
this.value,
15,
30);
context.translate(x, y);
//canvas原点的偏移量
context.rotate(deg);
//旋转度数
context.fillStyle =
this.randomColor();
//设置颜色
context.strokeStyle =
this.randomColor();
//设置颜色
context.rotate(-deg);
context.translate(-x, -y);
for (
var i =
0; i <=
15; i++) {
//验证码上显示线条
context.strokeStyle =
this.randomColor();
//轮廓风格
context.beginPath();
context.moveTo(
Math.random() * canvas_width,
Math.random() * canvas_height
);
context.lineTo(
Math.random() * canvas_width,
Math.random() * canvas_height
);
context.stroke();
}
for (
var i =
0; i <=
30; i++) {
//验证码上显示小点
context.strokeStyle =
this.randomColor();
context.beginPath();
//新建一条路径
var x = Math.random() * canvas_width;
var y = Math.random() * canvas_height;
context.moveTo(x, y);
//吧画笔移动到指定位置
context.lineTo(x +
1, y +
1);
//想指定位置移动
context.stroke();
}
}
}
};
.mycanvas {
border:
1px solid rgb(
199,
198,
198);
border-radius:
20%;
}