一、引言

本文主要是我在学习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. 两个input在同一行连着不留缝隙

    方法1:让两个input 连在一起写 不换行 <div class="inputDiv"> <input type="text" placeh ...

  2. selenium、python、firefox版本配合无敌

     selenium (2.53.6) .python2.7.13. firefox46.0.1 完美

  3. JavaScript在应用中的技巧（二）

    ==,===运算符和强制转换 先看个表达式: "1.0e0" == { valueOf: function() { return true; } }; 是的,这个结果可能有点出乎意 ...

  4. vue中引入swiper(vue中的滑块组件vue-awesome-swiper)

    第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import VueAwesomeSwiper from 'vue-awesome ...

  5. Java虚拟机JVM内存分区及代码执行机制

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt230 1.  JVM体系结构 图1 JVM体系结构    方法区:存放JVM ...

  6. UIImageView动画制作

    1.先初始化一个UIImageView的视图窗口 如:anima UIImageView *anima = [UIImageView alloc]initWithFrame(0,0,100,100); ...

  7. 第3阶段——内核启动分析之make uImage编译内核(3)

    目标: 通过分析makefile,明白make uImage如何编译内核 把整个内核的makefile分成三类(makefile资料文档在linux-2.6.22.6/Documentation/bu ...

  8. 【小白成长撸】--Fibonacci

    /*程序的版权和版本声明部分: *Copyright(c) 2016,电子科技大学本科生 *All rights reserved. *文件名:Fibonacci *程序作用:计算菲薄拉稀数列 *作者 ...

  9. RAID基础知识总结

    1.RAID RAID:Redundant Arrays of Inexpensive(Independent)Disks,即独立磁盘冗余阵列,简称磁盘阵列.简单地说就是把多个独立的硬盘组合起来,从而 ...

  10. ★电车难题的n个坑爹变种

    哲学家都不会做的电车难题变异 此题会答清华北大 "电车难题(Trolley Problem)"是伦理学领域最为知名的思想实验之一,其内容大致是: 一个疯子把五个无辜的人绑在电车轨道 ...