Using HTML5 canvas to draw rounded rectangle and some related application examples

Time:2021-7-30

The rounded rectangle is composed of four lines and four 1 / 4 arcs, which are disassembled as follows.
2016322111336083.jpg (600×425)

Because we want to write a function instead of a fixed rounded rectangle, the parameters required by the function are listed here. After analysis, type the code directly.

JavaScript CodeCopy contents to clipboard
  1. <!DOCTYPE html>   
  2. <html lang=“zh”>   
  3. <head>   
  4.     <meta charset=“UTF-8”>   
  5. < title > rounded rectangle < / Title >
  6.     <style>   
  7.         body { background: url(“./images/bg3.jpg”) repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id=“canvas-warp”>   
  13.     <canvas id=“canvas”>   
  14. Your browser doesn’t support canvas?! Change one quickly!!
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById(“canvas”);   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext(“2d”);   
  24.         context.fillStyle = “#FFF”;   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         drawRoundRect(context, 200, 100, 400, 400, 50);   
  28.         context.strokeStyle = “#0078AA”;   
  29.         context.stroke();   
  30.     }   
  31.   
  32.     function drawRoundRect(cxt, x, y, width, height, radius){   
  33.         cxt.beginPath();   
  34.         cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);   
  35.         cxt.lineTo(width – radius + x, y);   
  36.         cxt.arc(width – radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);   
  37.         cxt.lineTo(width + x, height + y – radius);   
  38.         cxt.arc(width – radius + x, height – radius + y, radius, 0, Math.PI * 1 / 2);   
  39.         cxt.lineTo(radius + x, height +y);   
  40.         cxt.arc(radius + x, height – radius + y, radius, Math.PI * 1 / 2, Math.PI);   
  41.         cxt.closePath();   
  42.     }   
  43. </script>   
  44. </body>   
  45. </html>  

Operation results:
2016322111413272.jpg (850×500)

It is recommended that you draw a rounded rectangle by yourself, which is helpful to master the path.

Let’s use this function to do something else.

Draw 2048 game interface
We don’t explain the code too much. We study it ourselves. We suggest that we try to write it ourselves first. Because I use hard coding here, it’s not very good. You can also try to optimize it.

JavaScript CodeCopy contents to clipboard
  1. <!DOCTYPE html>   
  2. <html lang=“zh”>   
  3. <head>   
  4.     <meta charset=“UTF-8”>   
  5. < title > 2048 game interface < / Title >
  6.     <style>   
  7.         body { background: url(“./images/bg3.jpg”) repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id=“canvas-warp”>   
  13.     <canvas id=“canvas”>   
  14. Your browser doesn’t support canvas?! Change one quickly!!
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById(“canvas”);   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext(“2d”);   
  24.         context.fillStyle = “#FFF”;   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         drawRoundRect(context, 200, 100, 400, 400, 5);   
  28.         context.fillStyle = “#AA7B41”;   
  29.         context.strokeStyle = “#0078AA”;   
  30.         context.stroke();   
  31.         context.fill();   
  32.   
  33.         for(var i = 1; i <= 4; i++){   
  34.             for(var j = 1; j <= 4; j++){   
  35.                 drawRoundRect(context, 200 + 16 * i + 80 * (i – 1), 100 + 16 * j + 80 * (j – 1), 80, 80, 5);   
  36.                 context.fillStyle = “#CCBFB4”;   
  37.                 context.strokeStyle = “#0078AA”;   
  38.                 context.stroke();   
  39.                 context.fill();   
  40.             }   
  41.         }   
  42.     }   
  43.   
  44.     function drawRoundRect(cxt, x, y, width, height, radius){   
  45.         cxt.beginPath();   
  46.         cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);   
  47.         cxt.lineTo(width – radius + x, y);   
  48.         cxt.arc(width – radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);   
  49.         cxt.lineTo(width + x, height + y – radius);   
  50.         cxt.arc(width – radius + x, height – radius + y, radius, 0, Math.PI * 1 / 2);   
  51.         cxt.lineTo(radius + x, height +y);   
  52.         cxt.arc(radius + x, height – radius + y, radius, Math.PI * 1 / 2, Math.PI);   
  53.         cxt.closePath();   
  54.     }   
  55. </script>   
  56. </body>   
  57. </html>   
  58.   

Operation results:
2016322111454844.jpg (850×500)

After the rounded rectangle function is written, it can be encapsulated into the JS file. In the future, any good function can be put into it. After accumulation, this file is a set of its own graphics library and game engine. Isn’t it very cool?

In fact, game making is the main purpose of canvas, but you should know that every game designer is an artist.

Draw wechat dialog box
You can try to use canvas to draw the wechat chat interface for practice and consolidation.
2016322111559183.jpeg (300×534)

Here we use some knowledge of drawing rectangle, drawing rounded rectangle, drawing multi line graphics and filling color. There are also some canvas text APIs that we haven’t mentioned, so as long as you can draw a general interface, you are qualified. If you can draw it, you will basically master the canvas API.

In fact, the above dialogue is generated -“Wechat interface generator web version”, it can be described as a wechat artifact. Isn’t it very cool?
2016322111621042.jpg (850×500)

This is only the first version that I spent two days writing in the summer vacation. It has not yet reached the point of release. When I wrote this section, the interface of this web page is still being optimized. You can try to do it yourself, or you can pay attention to and refer to my small project GitHub:Wechat interface generator。 This section will not repeat the interface code.

Well, I’ve basically learned all the basic canvas drawing APIs here. Let’s pick up our brushes and play freely!

Recommended Today

VBS obtains the operating system and its version number

VBS obtains the operating system and its version number ? 1 2 3 4 5 6 7 8 9 10 11 12 ‘************************************** ‘*by r05e ‘* operating system and its version number ‘************************************** strComputer = “.” Set objWMIService = GetObject(“winmgmts:” _  & “{impersonationLevel=impersonate}!\\” & strComputer & “\root\cimv2”) Set colOperatingSystems = objWMIService.ExecQuery _  (“Select * from […]