本文记录了一次跟随视频学习使用HTML、CSS和JavaScript生成随机验证码的过程。在实践中，作者尝试添加了提交按钮并实现验证码验证功能，但遇到了canvas尺寸调整和input警告的问题。文章分享了学习到的canvas使用、JS变量作用域及context相关知识，并期望得到大佬的指导帮助。
昨天在小破站看到一个前端生成随机验证码的视频，感觉很有意思，就跟着操作了一下，成功了。
后来自己又想给它加一个提交按钮，输入并判断验证码的正确性，也可以正常运行，但是我的代码好像还是存在一些bug：
1.canvas标签是绘图容器，自带属性使它是一个默认300*150的容器，缩小canvs容器时，里面的绘图也会变小，我没有找到合适的方法去调整它的大小。
2.对于输入框input，我使用了float浮动，为了使input输入框和canvas里面的验证码并排，但是被vscode警告了。
这次的实战练习也经历了很多坎坷，但是也收获很大。学习到了canvas标签的用法、JS全局变量和局部变量、以及有关context的一些属性和方法。
最后，希望路过的大佬，帮我看看bug，帮帮菜鸟。
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
label{
最低0.47元/天 解锁文章
505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
