vue使用canves把数字转成图片验证码

 <canvas id="captchaCanvas" width="100" height="40"></canvas>


function drawCaptcha(text) {
  const canvas = document.getElementById('captchaCanvas');
  const ctx = canvas.getContext('2d');

  // 设置背景颜色
  ctx.fillStyle = '#f0f0f0';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 随机生成颜色
  function randomColor() {
    return `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`;
  }

  // 设置字体样式
  ctx.font = '30px Arial';
  ctx.fillStyle = randomColor();

  // 在 Canvas 上绘制文本,并给每个数字一个随机的位置和旋转角度
  for (let i = 0; i < text.length; i++) {
    const x = 15 + i * 20;
    const y = 30 + Math.random() * 8 - 4;
    const angle = Math.random() * 0.3 - 0.15; // -0.15 到 0.15 弧度

    ctx.save(); // 保存当前的画布状态
    ctx.translate(x, y); // 将原点移动到字符绘制位置
    ctx.rotate(angle); // 随机旋转字符
    ctx.fillText(text[i], 0, 0); // 绘制字符
    ctx.restore(); // 恢复画布状态
  }

  // 添加一些干扰线
  for (let i = 0; i < 5; i++) {
    ctx.strokeStyle = randomColor();
    ctx.beginPath();
    ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
    ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
    ctx.stroke();
  }

  // 添加一些干扰点
  for (let i = 0; i < 30; i++) {
    ctx.fillStyle = randomColor();
    ctx.beginPath();
    ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, 1, 0, Math.PI * 2);
    ctx.fill();
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/910819.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

mybatisgenerator生成mapper时报错

本想使用generator自动生成model和mapper&#xff0c;没想到插件执行的时候报如下错误。 Failed to execute goal org.mybatis.generator:mybatis-generator-maven-plugin:1.3.2:generate (default-cli) on project ywq-mybatis-tools: Execution default-cli of goal org.myb…

【无标题】西安交通大学提出少锚点的端到端车道线检测算法Polar R-CNN

Abstract 车道线检测在自动驾驶中是一个关键且充满挑战的任务&#xff0c;特别是在实际场景中&#xff0c;由于车道线可能因其他车辆而被遮挡、形状纤细且长度较长&#xff0c;检测难度增大。现有基于锚点的检测方法通常依赖于预设的锚点来提取特征&#xff0c;并随后对车道线…

Vue + Vant Picker实现省市区三级联动

一、picker选择器的数据由columns属性控制&#xff0c;columns中有几个元素就代表该选择器有多少级&#xff0c;通过change方法来给对应列赋值 this.columns [{values: citys,className: "column1",defaultIndex: 0,flex: 1, //控制每列的宽度},{values: citys[0].…

Windows安装配置node.js

下载安装 下载 访问下载 | Node.js 中文网&#xff0c;下载 推荐使用长期支持版本&#xff0c;但是此次是学习用的&#xff0c;使用最新版本试一下 安装 其实一路next基本就可以了&#xff0c;注意调整下安装目录 查看版本 C:\Users\PC>node -v v22.11.0 C:\Users\PC>…

Mac保护电池健康,延长电池使用寿命的好方法

使用Mac的过程中&#xff0c;如何延长电池的使用寿命是大家非常关心的问题&#xff0c;而养成一个良好的充电习惯能够有效的延长电池的使用寿命 避免过度充电和过度放电能够有效的保护电池&#xff0c;因此长时间的充电与长时间放点都不可取&#xff0c;但是在日常的使用过程中…

Kaggle生物信息学挑战:酶稳定性预测大赛

背景介绍 酶的稳定性是影响其实际应用的关键因素之一。通过定点突变可以改善酶的稳定性,但实验筛选稳定性突变体的成本较高。预测突变对酶稳定性的影响,加速筛选稳定性更高的酶突变体。 概念解释 X 残基&#xff1a;假设 它用 红色表示 &#xff0c; Y 残基&#xff1a;假设…

HarmonyOS NEXT 应用开发实战:十一、知乎日报项目接口使用指南

在本篇博文中&#xff0c;我们将带您完成一个简单的知乎日报项目&#xff0c;主要关注如何使用 h_request库与后端接口进行交互。我们将快速搭建起项目&#xff0c;并利用该库的优势提高开发效率。 选择 h_request 的理由 在进行 HarmonyOS 开发时&#xff0c;原始的 ohos.net…

STM32——串口

1、串口是什么 串口呢&#xff0c;作为硬件调试的时候&#xff0c;是很有用的&#xff0c;我觉得搞嵌入式是经常和串口打交道的 串口&#xff08;Serial Port&#xff09;是一种用于计算机和外部设备之间进行数据通信的接口。它通过串行通信方式传输数据&#xff0c;即一次只…

sparkSQL的UDF,最常用的regeister方式自定义函数和udf注册方式定义UDF函数 (详细讲解)

- UDF&#xff1a;一对一的函数【User Defined Functions】 - substr、split、concat、instr、length、from_unixtime - UDAF&#xff1a;多对一的函数【User Defined Aggregation Functions】 聚合函数 - count、sum、max、min、avg、collect_set/list - UDTF&#xff1a;…

水库大坝安全监测预警方法

一、监测目标 为了确保水库大坝的结构安全性和运行稳定性&#xff0c;我们需要采取一系列措施来预防和减少因自然灾害或其他潜在因素所引发的灾害损失。这不仅有助于保障广大人民群众的生命财产安全&#xff0c;还能确保水资源的合理利用和可持续发展。通过加强大坝的监测和维护…

Java:网络原理-TCP/IP

1.应用层 主要涉及两种情况: (1)使用大佬们已经创建好的应用层协议. (2)自己定义应用层协议. [1]明确前后端交互过程中,需要传递哪些信息. 比如开发一个外卖软件,展示"商家列表" 此处就需要先确定传递的信息是啥. a.请求:用户id; 用户所处的位置 b.响应:商家…

C++类的多重继承演示

一个派生类可以继承多个基类 以下代码演示派生类zzj继承两个基类people、student #include <iostream>using namespace std;class people { private:int m_age; public:people(int age);void print();~people(); };people::people(int age) {cout << "peopl…

信息安全建设方案,网络安全等保测评方案,等保技术解决方案,等保总体实施方案(Word原件)

1 概述 1.1 项目简介 1.2 测评依据 2 被测信息系统情况 2.1 定级情况 2.2 承载的业务情况 2.3 网络结构 2.4 被测对象资产 2.5 上次测评问题整改情况说明 3 测评范围与方法 3.1 测评指标 3.1.1 安全通用要求指标 3.1.2 安全扩展要求指标 3.1.3 其他安全要求指标 3.1.4 不适用安…

vue3学习---案例实现学习

目录 一&#xff0c;京东秒杀导航栏 1&#xff0c;静态样式展示 2&#xff0c;设计步骤 1&#xff0c;html骨架 2&#xff0c;css样式设计 3&#xff0c;vue3动态样式设计 1&#xff0c;v-for使用 1&#xff0c;先在js模块做如下准备 2&#xff0c;v-for遍历 2&#xff…

架构师:如何提高web网站的请求并发响应量?

文章目录 一、提出问题二、相关概念三、如何提高网站请求响应能力&#xff1f;四、负载均衡有那些方式&#xff1f;五、常用微服务架构图及推荐书籍 一、提出问题 今天&#xff0c;突然想到一个问题&#xff0c;双十一&#xff0c;那些电商网站的并发量是多大&#xff1f; 简…

中酱:健康生活的先行者

中酱&#xff1a;健康生活的先行者 在追求品质生活的道路上&#xff0c;健康是永恒的主题。每一个关乎健康的选择&#xff0c;都像是为生活点亮一盏明灯&#xff0c;指引我们走向更美好的生活。而在饮食这个与健康息息相关的领域&#xff0c;调味品的选择至关重要。中酱 —— 作…

使用CentOS宝塔面板docker搭建EasyTier内网穿透服务

0. 前言 EasyTier是一个简单、安全、去中心化的内网穿透 VPN 组网方案&#xff0c;部署方便&#xff0c;支持 MacOS/Linux/Windows/FreeBSD/Android平台&#xff0c;而且作者搭建了一个公共服务器&#xff0c;不想折腾自建服务&#xff0c;可以使用默认的公共服务器地址 tcp:/…

如何以开源加速AI企业落地,红帽带来新解法

CSDN 看到&#xff0c;生成式 AI 的火爆正在引发计算、开发、交互三大范式全面的升级和转换&#xff0c;全行业或将迎来一次全新的科技变革周期&#xff0c;可能比移动与云计算变革更加剧烈。不过 AI 经历了追求千亿模型效果和芯片、集群硬件的军备竞赛后&#xff0c;如何真正落…

计算机毕业设计Python+图神经网络手机推荐系统 手机价格预测 手机可视化 手机数据分析 手机爬虫 Django Flask Spark 知识图谱

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

【C语言】分支和循环详解(下)猜数字游戏

与诸君共进步&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 文章目录 1. 随机数的生成2. 猜数字小游戏的实现 1. 随机数的生成 掌握了前⾯学习的这些知识&#xff0c;我们就可以写⼀些稍微有趣的代码了&#xff0c;⽐如&#xff1a; 写⼀个猜数字游戏 游戏要求…