第2个回答 2018-11-07
如果是前端开发，请参考如下回答：
首先，要有HTML与JAVASCRIPT的相关知识。接下来，用HTML的画布（canvas)标签进行绘画。我直接贴代码了：
js部分：
//这是给出验证码的范围
function codeMaker() {
var codeSource = "abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
return loop(4, codeSource.length, codeSource);
}
//获取验证码
function isEmpty(obj) {
if (obj == null || obj == undefined || obj == "")
return true;
return false;
}
function loop(times, length,arr) {
var codeSource = "";
for (var getCode = 0; getCode < times; getCode++) {
if (isEmpty(arr)) {
randomNum(length).fillStyle = codeColor();
codeSource += randomNum(length);
} else if (arr.length > 0) {
arr[randomNum(length)].fillStyle = codeColor();
codeSource += arr[randomNum(length)];
}
}
return codeSource;
}
//获取随机颜色
function xColorNumber() {
return '#' + loop(3, 10);
//如果想要固定颜色，只要 return '#xxxxxx' (此处举例为六位十六进制）
}
//写入画布工作
function draw() {
var codeValue=codeMaker();//获取验证码的值并赋值
var drawArea = document.getElementById('codeChecker');//通过ID来找到画布
var diversion = drawArea.getContext('2d');//定义为2d绘画
diversion.fillStyle ="white";//绘画区域背景色为白色（如果想要随机颜色，调用xColorNumber()函数即可（diversion.fillStyle=xColorNumber()））
diversion.fillRect(0, 0, 265, 220);//定义绘画区域大小
diversion.font = 'bold 5em Arial';//定义验证码字体属性
diversion.fillText(codeValue, 25, 110); //写入验证码（25和110分别是起始的相对于画布的x和y坐标)
}
在HTML中：
<body>
<canvas id="codeChecker"></canvas>
</body>
希望对你有帮助^~^!