一、引言

本文主要是我在学习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. python专题-Mysql数据库（python2._+ Mysqldb）

    Python使用MySQL数据库 MySQLdb驱动从2014年1月停止了维护. Python2 MySQLdb 一,安装mysql 如果是windows 用户,mysql 的安装非常简单,直接下载安 ...

  2. DB Error || Warning

    数据库在进行增删改查时有时候会发生错误,当在程序中一个操作总是不起作用的时候,我们可以尝试如下方法: 1.输出sql语句,有的sql语句可能是通过一些字符拼接完成的,这时候可能会发生'', +之类的混 ...

  3. chrome开发工具指南（八）

    编辑 DOM Chrome DevTools 的 Elements 面板中的 DOM 树视图可以显示当前网页的 DOM 结构.通过 DOM 更新实时修改页面的内容和结构. DOM 定义您的页面结构.每 ...

  4. jmeter3.2 创建webservice 测试

    1.创建测试计划 templates→select Template→Building a SOAP WebService Test Plan 2.修改HTTP Request Defaults中的参 ...

  5. Vuex 最简单的数量增减实例

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...

  6. ★浅谈Spanking情节

  7. ceph存储引擎bluestore解析

    原文链接:http://www.sysnote.org/2016/08/19/ceph-bluestore/ ceph后端支持多种存储引擎,以插件式的方式来进行管理使用,目前支持filestore,k ...

  8. 结对作业--基于GUI的四则运算生成器

    组员:201421123015 陈麟凤 201421123019 张志杰 201421123020 黄海鸿 coding 地址 :https://coding.net/u/zhang1995/p/wo ...

  9. 201521123100 《Java程序设计》第4周学习总结

    1. 本章学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. (1)多态性:相同的形态,不同的行为 (2)类型转换与强制类型转换(cast) 2. 书面作 ...

  10. 201521123021第二周Java学习总结

    1.本章学习总结 ①初步掌握了Java程序简单的输入和输出. ②回顾了运算符和表达式的使用. ③在数据类型的学习的中,要注意各类型的取值范围,特别是byte型范围很小,若为128即溢出. ④在Java ...