canvas(学习)绘制验证码

验证码一般有服务器端生成，本次生成验证码只是为了学习canvas的用法

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><!--<script src="JS/jquery-3.3.1.js"></script>--><script type="text/javascript">//获取随机颜色方法function GetColor() {var r = Math.floor(Math.random() * 256);var g = Math.floor(Math.random() * 256);var b = Math.floor(Math.random() * 256);return "rgb(" + r + "," + g + "," + b + ")"}//页面加载事件
        window.onload = function () {YZM();};//绘制验证码方法function YZM() {var canvas = document.getElementById("canvas");//获取到canvas的DOM元素var context = canvas.getContext("2d");//定义canvas的绘制环境
            canvas.width = 120;//设置canvas的宽度
            canvas.height = 40;//设置canvas的高度
            context.strokeRect(0, 0, 120, 40);//绘制一个矩形框var aCode = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'F', 'I ', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];for (var i = 0; i < 4; i++) {var x = 20 + i * 20;//定义每个字符的间距var y = 20 + Math.random() * 10;//定义字符上下浮动var index = Math.floor(Math.random() * aCode.length);//向下取整数 获得aCode里面的随机索引var txt = aCode[index];//取出txt
                context.font = "bold 25px 微软雅黑";//设置字体
                context.fillStyle = GetColor();//获取随机颜色//文字旋转
                context.translate(x, y);//画布平移至坐标x,yvar deg = 40 * Math.random()*(Math.random > 0.5 ? 1 : -1) * Math.PI / 180;//获取一个随机弧度值
                context.rotate(deg);//将画布旋转
                context.fillText(txt, 0, 0);//在坐标点绘制文字
                context.rotate(-deg);//将画布还原
                context.translate(-x, -y);//将画布还原
            }//绘制8条随机线for (var i = 0; i < 8; i++) {context.beginPath();//开始一个路径
                context.moveTo(Math.random() * 120, Math.random() * 40);//设置开始点
                context.lineTo(Math.random() * 120, Math.random() * 40);//设置结束点
                context.strokeStyle = GetColor();//随机颜色
                context.stroke();//开始绘制
            }for (var i = 0; i < 10; i++) {context.beginPath();//开始一个路径var x = Math.random() * 120;//定义点的x坐标var y = Math.random() * 40;//定义点的y坐标
                context.moveTo(x, y);//开始点移动至坐标点
                context.fillStyle = GetColor();//获取随机颜色
                context.fillText("·", x, y);//开始绘制
            }};</script>
</head>
<body><canvas id="canvas">您的浏览器不支持 HTML5 canvas 标签。</canvas><a  href="#" onclick="YZM()">再试一次</a>
</body>
</html>

转载于:https://www.cnblogs.com/ChengMeng/p/9337155.html

canvas(学习)绘制验证码相关推荐

canvas学习绘制渐变色
1.createLinearGradient() 创建线性渐变 //Linear adj. 直线的线性的 //Gradient n. 梯度变化率 createLinearGradient(x1,y ...
canvas学习绘制扇形
1.自己用canvas绘制的一个丑丑的扇形(两个圆弧+一个梯形) <!DOCTYPE html> <html lang="en"> <head> ...
[HTML5 Canvas学习]绘制矩形
1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形代码: <script>var can ...
Canvas学习：封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方法, ...
Canvas学习：绘制圆和圆弧
圆和圆弧是图形中基本图形之一,今天我们来了解在Canvas中怎么绘制圆和圆弧.在Canvas中绘制圆和圆弧其实和绘制线段和矩形一样的简单.在Canvas中,CanvasRenderingContext ...
HTML5 学习手笔二：canvas API 绘制树形图案A
上篇通过对canvas 画对角线,了解了一些canvas画图基本原理.现在可以利用HTML5 canvas API创建一个场景:带有长跑跑道的树林. 本篇大纲用canvas API绘制树木的树冠为 ...
canvas学习总结四：绘制虚线
上一章节我们说到,线性路径的绘制,主要利用movoTo(),lineTo()等方法,当然 Canvas 2D API 也提供了虚线的绘制方法,CanvasRenderingContext2D.setL ...
canvas学习和滤镜实现
最近学习了 HTML5 中的重头戏-- canvas .利用 canvas,前端人员可以很轻松地.进行图像处理.其 API 繁多,这次主要学习常用的 API,并且完成以下两个代码: 实现去色滤镜实现 ...
html5canvas绘制图片源码,HTML5 CANVAS：绘制图片
HTML5 CANVAS:绘制图片通过前面的学习,我们现在已经可以在HTML5 canvas中绘制图形和文字,并给它们设置一些样式.我们还可以在中绘制图片.用于在作为绘制源的图片可以是下面的几种元素 ...

canvas(学习)绘制验证码

canvas(学习)绘制验证码相关推荐

最新文章

热门文章