效果图:

思路:

1, 绘制canvas画布,进行基础设置

2.绘制一个矩形

3.设置验证码的随机数

4.设置验证码随机数的随机颜色

5.绘制随机干扰线

6,绘制随机干扰点

经过以上六个步骤,验证码的雏形就做好了

7.旋转验证码中的随机数(这部分在章节内详细说明)

8.重新获取验证码

缕清思路,然后一步步操作

1.进行canvas的基础操作

(1)在html中定义画布

  <canvas id="canvas"></canvas>

(2)js定义

  window.onload = function(){
  var canvas = document.getElementById("canvas"); //获取到canvas对象
   var context = canvas.getContext("2d"); //获取到canvas绘图环境
//设置画布大小
canvas.width = 120;
canvas.height = 40;
};

2.绘制矩形

context.strokeRect(0,0,120,40);

3.设置验证码的随机数

(1)定义一个数组存放验证码的随机数,我设置了数字和小写字母

 var aCode = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];

(2)设置验证码的随机数

for(var i = 0; i < 4; i ++){
var x = 20 + i * 20;
var y = 10 + Math.random() * 10;
var index = Math.floor(Math.random()*aCode.length); //获取到一个随机的索引值
var txt = aCode[index]; //获取到数组里面的随机的内容
context.font = "bold 20px 微软雅黑"; //设置文字样式
context.fillText(txt,x,y);
}

4.设置验证码随机数的随机颜色

(1)通过以上步骤可以看到已经出现了随机数,接下来需要设置随机数的随机颜色

    function getColor(){
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
if(r == 255 && g == 255 && b == 255){
r = 0;
g = 0;
b = 0;
}
return "rgb("+r+","+g+","+b+")";
}

(2)然后再将随机颜色加进去

 context.fillStyle = getColor();

5.设置随机干扰线

//绘制干扰线
for(var i = 0; i < 8; i ++ ){
context.strokeStyle = getColor();
context.beginPath();
context.moveTo(Math.random()*120,Math.random()*40);
context.lineTo(Math.random()*120,Math.random()*40);
context.stroke();
}

6,绘制随机干扰点

干扰点和干扰线的原理是一样的,干扰点可以看成很小的干扰线

//绘制干扰点
for(var i = 0;i <20 ;i ++){
var x = Math.random() *120;
var y = Math.random() *40;
context.strokeStyle = getColor();
context.beginPath();
context.moveTo( x,y);
context.lineTo(x+1,y+1);
context.stroke();
}

7.旋转验证码中的随机数

因为canvas是一个画布,所以canvas中的内容只是“画”中的一部分,不能单独旋转,这里旋转的原理是每当绘制一个数字的之前将画布移动到相应数字的x,y的点,然后以点进行旋转,旋转好以后,绘制随机数,最后将画布还原到原来的位置进行下一个随机数的绘制

 //产生随机数
for(var i = 0; i < 4; i ++){
var deg = Math.random() * 180 * Math.PI / 180;
var x = 20 + i * 20;
var y = 10 + Math.random() * 10;
var index = Math.floor(Math.random()*aCode.length); //获取到一个随机的索引值
var txt = aCode[index]; //获取到数组里面的随机的内容
context.font = "bold 20px 微软雅黑"; //设置文字样式
context.fillStyle = getColor();
context.translate(x,y);
context.rotate(deg);
context.fillText(txt,0,0);
context.rotate(-deg);
context.translate(-x,-y); }

8.重新获取验证码

重新获取验证码需要在body中添加一个点击事件

 <a onclick="refresh()">重新获取</a>

然后将绘制随机数的代码封装成一个方法,我这里方法为draw(),canvas的刷新需要重新定义画布

    function refresh(){
var canvas = document.getElementById("canvas"); //获取到canvas对象
var context = canvas.getContext("2d"); //获取到canvas绘图环境
draw(canvas,context);
}

注:腾讯课堂视频小结

canvas绘制随机验证码的更多相关文章

  1. canvas实现随机验证码

    canvas实现随机验证码 知识点 canvas生成背景图和文字 设置字体样式和大小 String的fromCharCode(code码)生成大小写字母和数字 str.toLowerCase()转小写 ...

  2. 微信小程序 canvas 生成随机验证码

    转载:https://blog.csdn.net/qq_16646819/article/details/81020245?utm_source=blogxgwz0 js // pages/bind/ ...

  3. canvas制作随机验证码

    看到人家彩色背景的验证码想测试一下: 创建html代码: <canvas id="myCanvas" width="200" height="1 ...

  4. 用Canvas生成随机验证码(后端前端都可以)

    一 .使用前端生成验证码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  5. canvas绘制随机颜色的柱形图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 【重点突破】——Canvas技术绘制随机改变的验证码

    一.引言 本文主要是我在学习Canvas技术绘图时的一个小练习,绘制随机改变的验证码图片,虽然真正的项目里不这么做,但这个练习是一个掌握Canvas技术很好的综合练习.(真正的项目中验证码图片使用服务 ...

  7. 用canvas绘制验证码

    在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破. 验证码一般用PHP和java等后端语言编写: 但是在前端,用canva或者SV ...

  8. canvas绘制圆心扇形可组成颜色随机的七色小花

    啊~现在应该还是春天吧.心情一如既往的烦闷呐.最近做了一个canvas的扇形绘制的东西.把它整理出来变成一个适合春天的花朵绘制~沉闷的工作环境已经让我这种有趣的人也变成了无聊鬼怪呢.下次一定想找一个年 ...

  9. Android实现随机验证码——自定义View

    一.问题描述 熟悉web开发中童鞋们都知道为了防止恶意破解.恶意提交.刷票等我们在提交表单数据时,都会使用随机验证码功能.在Android应用中我们同样需要这一功能,该如何实现呢,下面我们就自定义一个 ...

随机推荐

  1. TFLite基础知识

    此基础知识仅为个人学习记录,如有错误或遗漏之处,还请各位同行给个提示. 概述 TFLite主要含有如下内容: (1)TFLite提供一系列针对移动平台的核心算子,包括量化和浮点运算.另外,TFLite ...

  2. FPM二:简单的APPLICATION-TABSTRIP(OIF)

    1.新建WDA程序ZLYFPM002 2.新建视图2,窗口2,并将视图2分配到窗口2. 3.继承UIBB类IF_FPM_UI_BUILDING_BLOCK 4.创建WDA 应用程序: 5.创建WDA ...

  3. 苹果手机的SB系列(3)超级烦人的账户解锁?

    不知道大家有没有这种体验,Iphone 每隔一段时间后账户就被锁定了,也不告诉你原因,就是要解锁? 我怎么感觉比做的比支付宝差多了,我注册支付宝十几年,也没有动不动就告诉了有安全原因,要解锁,要重置密 ...

  4. ubuntu安装smartGit

    1.首先安装jdk:(http://www.cnblogs.com/xiaochou/p/install_mint.html 评论区) 2.下载和安装smartGit: http://www.synt ...

  5. Servlet(2)

    HttpServlet 简介: Servlet 就是一个普通的java类,是运行在web容器上(tomcat)上的一个java类 用来通过Servlet中的代码,接受Http中浏览器的请求信息,以及对 ...

  6. JavaScript中的获取元素的方法

    通过id获取元素 document.getElementById(id名字) 通过标签获取元素 document/元素.getElementsByTagName(标签名) 通过css选择器获取元素 d ...

  7. Unity实现用户条款弹窗及登录

    首先来看效果图... 1.先编辑页面 1)新建登录按钮,更名为Login 2)新建toggle,新建方式如下图 调整toggle的大小和位置到适当的范围. 3)新建同意用户条款按钮,步骤为新建UI-& ...

  8. 前端开发面试题总结之——JAVASCRIPT(三)

    ___________________________________________________________________________________ 相关知识点 数据类型.运算.对象 ...

  9. java第五次笔记

  10. phthon--------异常处理

    一 什么是异常 异常就是程序运行时发生错误的信号(在程序出现错误时,则会产生一个异常,若程序没有处理它,则会抛出该异常,程序的运行也随之终止),在python中,错误触发的异常如下 而错误分成两种 # ...