一、引言

本文主要是我在学习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. 使用 qemu 搭建内核开发环境

    本文主要介绍在 MacOS 上使用 qemu 搭建 Linux Kernel 的开发环境.(在开始之前需要注意的是,本文中的 Linux 开发环境是一个远程服务器,而 qemu 被安装在本地的 Mac ...

  2. MongoDB副本集模式安装

    设备: 三个1G.20G.1核的虚拟机,系统是SentOS7 min 设置目录: Server1: mkdir -p /home/mongoshard/data/shard11 /home/mongo ...

  3. android TranslateAnimation 顶部segment分段移动动画

    这里实现的功能是从主页布局的fragment点击跳转到一个acitivity,然后顶部是一个切换的segment顶部是一个listview,点击segment分段让listview加载不同的内容.我这 ...

  4. java.lang.reflect.MalformedParameterizedTypeException异常问题

    做dubbo框架集成的时候,出现的问题,本来的原来的工程没有错误,引入dubbo后报错,原因是spring的jar文件冲突,我用的spring是4.x,dubbo引入的是2.5所以需要去掉,相关的po ...

  5. bugly cocos 接入和 符号表使用

    bugly cocos 接入和 符号表使用 在bugly网站下载 BuglyCocosPlugin 的sdk ios 1. 在 项目的 classes 里面新建 文件夹  BuglyCocosPlug ...

  6. jQuery EasyUI弹出确认对话框(确认操作中.....)

    因为毕业设计的原因,在初期设计系统的时候没有考虑功能的正确性,所以很多的功能都没有加验证和确认的操作,给人在操作方面上有一些不好的感觉(可能失误点击后,数据就别删除,或者增加了),所以在网上找了一些资 ...

  7. 理解oracle中连接和会话

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp44 理解oracle中连接和会话 1.  概念不同:概念不同: 连接是指物 ...

  8. Makefile中export分析

    在分析内核启动过程的./arch/arm/Makefile文件里碰到了这样字段 162 export TEXT_OFFSET GZFLAGS MMUEXT 然后在子目录arch/arm/kernel/ ...

  9. 小程序脚本语言WXS，你想要的都在这里了

    WXS脚本语言是 Weixin Script脚本的简称,是JS.JSON.WXML.WXSS之后又一大小程序内部文件类型.截至到目前小程序已经提供了5种文件类型. 解构小程序的几种方式,其中一种方式就 ...

  10. JavaSE（十）集合之List

    前面一篇的corejava讲的是集合的概述,这一篇我将详细的和大家讲解一下Collection下面的List.set.queue这三个子接口.希望大家能得到提升. 一.List接口 1.1.List接 ...