一、引言

本文主要是我在学习Canvas技术绘图时的一个小练习，绘制随机改变的验证码图片，虽然真正的项目里不这么做，但这个练习是一个掌握Canvas技术很好的综合练习。（真正的项目中验证码图片使用服务器端技术，而不是客户端技术。）

二、要求

  • 画布背景颜色随机（浅色）  ctx.fillRect()
  • 文字内容随机、大小随机、颜色随机（深色）、旋转角度随机
  • 6条随机干扰线（深色），处于文字上方
  • 50个杂色点（半径为1为园），处于文字上方

三、实现

注意：反复使用的功能，比如求随机数Math.floor(Math.random()*(max-min)+min);要封装为函数或插件，这样方便反复调用。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

   <h1>使用Canvas绘图</h1>

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

   <script>

       var w = 120;

       var h = 30;

       c1.width = w;

       c1.height = h;

       var ctx = c1.getContext('2d');

       //填充背景颜色

       ctx.fillStyle = rc(180,230);

       ctx.fillRect(0,0,w,h);

       ctx.textBaseline = 'top';

       //绘制随机的字符

       var pool = 'ABCDEFGHJKLMNPQRSTUVWXY3456789';

       for(var i=0;i<4;i++){

           var c = pool[rn(0,pool.length)];//下标随机取出

           var fs = rn(15,35);//随机的字体大小

           var deg = rn(-45,45);//随机的旋转角度

           ctx.font = fs+'px SimHei';

           ctx.fillStyle = rc(80,180);

           ctx.save();//存盘

           ctx.translate(30*i+15, 15);

           ctx.rotate(deg*Math.PI/180);

           ctx.fillText(c,-15+5,-15);

           ctx.restore();//恢复存盘

       }

       //绘制6条干扰线

       for(var i=0;i<6;i++){

           ctx.strokeStyle = rc(0,255);

           ctx.beginPath();

           ctx.moveTo(rn(0, w), rn(0, h));

           ctx.lineTo(rn(0, w), rn(0, h));

           ctx.stroke();

       }

       //绘制50个杂色点-半径为0.5的圆形，填充

       for(var i=0;i<50;i++){

           ctx.fillStyle = rc(0,255);

           ctx.beginPath();

           ctx.arc(rn(0,w), rn(0,h),  0.5, 0, 2*Math.PI);

           ctx.fill();

       }

       //random number：返回指定范围内的随机整数

       function rn(min,max){

           var n = Math.floor(Math.random()*(max-min)+min);

           return n;

       }

       //random color：返回指定范围内的随机颜色

       //形如：rgb(x,x,x)

       function rc(min, max){

           var r = rn(min, max);

           var g = rn(min, max);

           var b = rn(min, max);

           return `rgb(${r},${g},${b})`;

       }

   </script>

</body>

</html>

 效果：

注：转载请注明出处

【重点突破】——Canvas技术绘制随机改变的验证码的更多相关文章

  1. 【重点突破】——Canvas技术绘制音乐播放器界面

    一.引言 在用Canvas练习制作了验证码之后,还有一个用Canvas技术很综合的练习——制作音乐播放器.在做这个练习的过程中,还有一个重要的观察点,那就是理解Canvas的一大问题. 二.要求  点 ...

  2. canvas绘制随机验证码

    效果图: 思路: 1, 绘制canvas画布,进行基础设置 2.绘制一个矩形 3.设置验证码的随机数 4.设置验证码随机数的随机颜色 5.绘制随机干扰线 6,绘制随机干扰点 经过以上六个步骤,验证码的 ...

  3. 软件项目技术点(7)——在canvas上绘制自定义图形

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 图形种类 目前我们软件可以绘制出来的形状有如下这几种,作为开发者我们一直想支持用户可以拖拽的类似word里面图形库,但目前还没有找到比 ...

  4. canvas高效绘制10万图形,你必须知道的高效绘制技巧

    最近的一个客户项目中,简化的需求是绘制按照行列绘制很多个圆圈.需求看起来不难,上手就可以做,写两个for循环. 原始绘制方法 首先定义了很多Circle对象,在遍历循环中调用该对象的draw方法.代码 ...

  5. Canvas上绘制几何图形

    重要的类自定义View组件要重写View组件的onDraw(Canvase)方法,接下来是在该 Canvas上绘制大量的几何图形,点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形,等各种形状 ...

  6. canvas技术整理

    canvas技术整理 html <canvas id= "canvas"></canvas> javascript var canvas = documen ...

  7. openLayers 4 canvas图例绘制，canvas循环添加图片，解决图片闪烁问题

    一.问题来源: 接触Openlayers 一段时间了,最近做了一个农业产业系统,项目中涉及到产业图例,最后考虑用canvas来绘制图例图像.当中带图片的图例移动时,图片会实现闪烁留白情况.闪烁是因为绘 ...

  8. 安卓自己定义View进阶-Canvas之绘制基本形状

    Canvas之绘制基本形状 作者微博: @GcsSloop [本系列相关文章] 在上一篇自己定义View分类与流程中我们了解自己定义View相关的基本知识,只是,这些东西依然还是理论,并不能拿来(zh ...

  9. 自定义控件之Canvas图形绘制基础练习-青春痘笑脸^_^

    对于自定义控件的意义不言而喻,所以对它的深入研究是很有必要的,前些年写过几篇关于UI效果的学习过程,但是中途比较懒一直就停滞了,而对于实际工作还是面试来说系统深入的了解自定义控件那是很有必要的,所以接 ...

随机推荐

  1. jQuery遍历-同胞

    同胞拥有相同的父元素. 通过 jQuery,您能够在 DOM 树中遍历元素的同胞元素. 在 DOM 树中水平遍历 有许多有用的方法让我们在 DOM 树进行水平遍历: siblings() next() ...

  2. openssl命令

    author:JevonWei 版权声明:原创作品 1.构建根证书 构建根证书前,需要构建随机数文件(.rand),完整命令如 openssl rand -out private/.rand 1000 ...

  3. java 实现微博,QQ联合登录

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt313 开发平台 http://connect.qq.com/  http:/ ...

  4. 图片懒加载Demo

    相关知识: [js获取元素位置+元素大小]全面总结

  5. 规则集之探究何时使用HashSet、LinkedHashSet以及TreeSet?

    前言 Java集合框架三种主要类型的集合:规则集(Set).线性表(List).队列(Queue).Set用来存储不可重复的元素:List用来存储有元素构成的有序的集合:而Queue则用于存储用先进先 ...

  6. 猎八哥FLY——将数据库中的某一表中的某一列或者多列添加到另一张表的某一列中

    成绩表的字段:xueshenghao,yu,shu,yy均为int类型.新标与成绩表字段相同,不同的是成绩表中拥有数据,而新表中没有(是一张空表,一条数据都没有).需求:将成绩表中每一个人的yu,sh ...

  7. 使用sql语句复制一张表

    如何使用sql语句复制一张表? 方法一:第一步:先建一张新表,新表的结构与老表相等. create table newbiao like chengjibiao(老表名); 第二步:将老表中的值复制到 ...

  8. grep&正则表达式

    p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-bottom: .0001pt; text-align: justify; f ...

  9. 转：【Java并发编程】之十一：线程间通信中notify通知的遗漏（含代码）

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17228213 notify通知的遗漏很容易理解,即threadA还没开始wait的时候,t ...

  10. MITNIK ATTACK

    Https 443 http 80 TCP/IP 协议栈:将数据封装包头 传输层报头 Ack回复确认位 FIN结束位 SIN 开始位 RST 重置位 Seq 序号位 网络层报头 目的地址 原地址 报文 ...