昨天在小破站看到一个前端生成随机验证码的视频,感觉很有意思,就跟着操作了一下,成功了。
后来自己又想给它加一个提交按钮,输入并判断验证码的正确性,也可以正常运行,但是我的代码好像还是存在一些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{