Recently, I made a small requirement, that is, click the delete button, the pop-up prompt box asks you to input verification code to confirm deletion.

So how to display the verification code obtained from the background for user input? When I understood the requirement, I thought that the background directly sent the verification code to the user’s mobile phone and then asked him to input. In fact, it was not true. I misunderstood, and the verification code should be drawn on canvas.

After understanding the requirements, I searched the website with the verification code and started the canvas drawing journey.

Technology stack: Quasar (a VUE based framework)/Canvas

  • rendering

  • Click the delete button to trigger the pop-up box

  • Why does it pop up? Click delete button, trigger handleAddDialogOpened event, make addDialogOpened in data changed from false to true, the popbox will be displayed instead of not displayed before.

  • This code is popbox code: ref on canvas tag is redundant, sorry, forgot to delete it

  • dataData defined inside: definitioncanvasWidth and height of the canvas
  • verifyCode_Bind the verification code for the user input field
  • computedIn the calculated propertiesmapStatemappingverifyCodeThe data,mapStateThe helper function is used to help us simplify the generation of computed propertiesvuexHave a look at the official website
  • mapActionsIs also a helper function that maps the component’s methods tostore.dispatch
  • getVerifyCodeIs the request method to get validation from the background
  • canvasclickThe verification code () method is used when the user does not recognize the verification code or reenters the verification code incorrectlyIn aYou can update the verification code (this time to get the verification code from the background again)


  • Core code:drawPic()Method is the core method of drawing captcha
    • 1 Get canvas label usagegetElementByIdNative to obtaindom
    • 2 use.getContext('2d')Prepare the canvas.textBaselineDefine the baseline for the canvas to draw
    • 3 Drawing the Background
    • 4 Draw the verification code
    • Draw lines and points that interfere with vision

  • drawText()Method of drawing captcha
  • drawLine()Method of drawing interference lines
  • drawDot()Method of drawing interference points
  • Define the method of popup and delete the method,Return to demand, this requirement is completed and can be combined with the background, no problem can be submitted code

Conclusion:

A. When you meet a requirement that you haven’t done before, you need to see how others have done it. So far, it is not difficult for you to create your own code without any analogy

B. Be good at using debugger to debug code and see if there are problems in your code. If there are bugs, don’t panic, drink water, go to the interrupt point of debugger to deeply understand the code execution logic and solve efficiently

C. As a member of the social animal army, to self-discipline, to output, to exercise, have time to look at the code daquan, subway on the MDN document, solid JS, look forward to that you want to be, mutual encouragement