Canvas入门实现图形验证码

本文主要介绍使用canvas实现图形验证码的一些思路，以及如何使用javascript面向对象的方式更加友好的实现canvas的功能。关于canvas的一些基本使用方法和API，整理了一张思维导图，有兴趣的可以参考学习。你将获得闭包使用canvas的常用API使用javascript的面向对象实现实现一个canvas图形验证码的总体思路和常用算法设计思路使用canvas生成canvas使用canvas绘制干涉线或者噪声点生成随机不重复的字母n使用canvas绘制文字初始化和canvas点击事件组件封装。文末会附上组件打包的源码。欢迎随时交流。关于项目的打包，我会用自己的基于gulp4的9012来教大家如何使用gulp4开发项目脚手架。效果预览实现思路我会按照上面设计思路的步骤一步步实现。首先，让我们定义一个es5类：functionGcode(el,option){this.el=typeofel==='string'?document.querySelector(el):el;this.option=option;this.init();}其中init用于初始化，参数el表示需要挂载的元素或者元素id，option是传入的可选选项，后面会讲到，在代码中体现，通常是常见的面向对象常规。1.绘制画布Gcode.prototype={constructor:Gcode,init:function(){if(this.el.getContext){isSupportCanvas=true;varctx=this.el.getContext('2d'),//设置canvaswidthHighcw=this.el.width=this.option.width||200,ch=this.el.height=this.option.height||40;}}}这里我们在初始化的时候先定义一个canvas画布方法，宽高为用户自定义的宽高，默认为200*40。2.绘制干扰线//绘制干扰线drawLine:function(ctx,lineNum,maxW,maxH){ctx.clearRect(0,0,maxW,maxH);for(vari=0;i-1){returnthis.generateUniqueText(source,hasList,limit)}else{returntext}}//生成指定数量的随机文本randomText:function(len){varsource=['a','b','c','d','e','f','g','h','i','j','k','l','m','o','p','q','r','s','t','u','v','w','x','y','z'];varresult=[];varsourceLen=source.length;for(vari=0;i-1){returnthis.generateUniqueText(source,hasList,limit)}else{returntext}}}newGcode('#canvas_code',{lineNum:6})})();