一、引言

本文主要是我在学习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. [2014-02-19]如何移除响应头中的.net framework 版本信息 以及mvc版本信息？

    先来看一个简单mvc3网站的响应头 修改Global.asax文件 在Application_Start方法中添加如下代码 MvcHandler.DisableMvcResponseHeader = ...

  2. split添加limit参数

    String str = "I love you"; /**这里被分割为I 和love you**/ String[] spiltStr = str.spit(" &qu ...

  3. prop解决一个checkbox选中后再次选中失效的问题

    //问题点 初始状态复选框没有全选, 点击全选按钮调用checkAll方法, 实现了全选, 然后点击全不选按钮, 实现了全不选, 然后再次点击全选按钮, 结果却木有全选, 再反复点击木有任何反应. d ...

  4. Web.py 框架学习笔记 - URL处理

    最近由于工作需要开始学习基于python的web应用框架web.py.为了方便学习,将学习心得逐日记下以便日后复习. URL 模板: web.py提供了一套url处理的模板,在python工程中,只需 ...

  5. Linux平台 Oracle 12cR2 RAC安装Part3：DB安装

    Linux平台 Oracle 12cR2 RAC安装Part3:DB安装 四.DB(Database)安装 4.1 解压DB的安装包 4.2 DB软件安装 4.3 ASMCA创建磁盘组 4.4 DBC ...

  6. LVS-NAT搭建HTTP及HTTPS

    author:JevonWei 版权声明:原创作品 搭建NAT模式的HTTP环境 网络拓扑图如下 网络环境 RS1 192.168.198.138 RS2 192.168.198.120 LVS: D ...

  7. 【C++小白成长撸】--（续）单偶数N阶魔方矩阵

    1 /*程序的版权和版本声明部分: **Copyright(c) 2016,电子科技大学本科生 **All rights reserved. **文件名:单偶数N阶魔方矩阵 **程序作用:单偶数N阶魔 ...

  8. 原创：LNMP架构部署个人博客网站 禁止转载复制

    nginx编译安装步骤 ①. 检查软件安装的系统环境 cat /etc/redhat-release uname -r ②. 安装nginx的依赖包(pcre-devel openssl-devel) ...

  9. 【转】为什么选择Spring Boot作为微服务的入门级微框架

    本文为普元云计算高级工程师许二虎在普元云计算架构设计群的微课堂分享.如需加入普元新一代数字化企业云平台研发设计群参与微课堂.架构设计与讨论直播,请直接回复此公众号:"加群 姓名 公司 职位 ...

  10. 多线程：深入Thread.sleep

    一直都说,Threed.sleep是不会释放锁,而wait是释放锁的(对象锁),现理论上来分析一下. 由于CPU分配的每个线程的时间片极为短暂(一般为几十毫秒),所以,CPU通过不停地切换线程执行,这 ...