zoukankan      html  css  js  c++  java
  • canvas验证码制作

    <canvas id="canvas" width="120" height="40"></canvas>
    <script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    draw();
    canvas.onclick = function () {
    context.clearRect(0, 0, 120, 40); //清除画布
    draw();
    }
    function getColor() {
    // 0 - 255之间的随机数
    var r = Math.round(Math.random() * 255);
    var g = Math.round(Math.random() * 255);
    var b = Math.round(Math.random() * 255);
    return `rgb(${r},${g},${b})`;
    // return "rgb(" + r + "," + g + "," + b + ")";
    }
    function draw() {
    context.strokeRect(0, 0, 120, 40); //绘制一个描边矩形
     
    //随机绘制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();
    }
    //20个小点, 颜色随机
    for (var i = 0; i < 20; i++) {
    context.beginPath();
    var x = Math.random() * 120;
    var y = Math.random() * 40;
    context.arc(x,y,1,0,360 * (Math.PI/180));
    context.fillStyle=getColor();
    context.fill();
    }

    var aCode = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
    for (var i = 0; i < 4; i++) {
    context.save();
    var x = 20 + i * 20; //每个文字间隔是 20个像素
    var y = 20 + 10 * Math.random(); //垂直坐标是 20 - 30个像素之间

    var index = Math.floor(Math.random() * aCode.length);//随机索引值
    var txt = aCode[index];
    context.font = "bold 25px 微软雅黑";
    context.fillStyle=getColor();
    //水平和垂直方向的位移
    context.translate(x,y);
    //对文字的旋转
    var deg=90*Math.random()* (Math.PI/180);
    context.rotate(deg);
    //写入文字
    context.fillText(txt, 0, 0);
    context.restore();
     
    }
    }
  • 相关阅读:
    Android 富文本框实现 RichEditText
    mmap和普通文件读写的区别和比较 & mmap的注意点
    exit和_exit的区别
    绑定线程到特定CPU处理器
    软中断与硬中断 & 中断抢占 中断嵌套
    线程与信号处理
    内核信号处理 & CPU8个通用寄存器
    SIGSEGV 和 SIGBUS & gdb看汇编
    Linux内核态用户态相关知识 & 相互通信
    Linux进程空间分布 & 上下文
  • 原文地址:https://www.cnblogs.com/laneyfu/p/14352619.html
Copyright © 2011-2022 走看看