Use HTML5 Canvas to draw rounded rectangle and some related application examples, html5canvas
The rounded rectangle consists of four sections and four 1/4 arcs.
Because we want to write a function instead of a fixed rounded rectangle, the parameters required by the function are listed here. After analysis, the code is directly typed out.
Copy the content to the clipboard using JavaScript Code
- <! DOCTYPE html>
- <Html lang = "zh">
- <Head>
- <Meta charset = "UTF-8">
- <Title> rounded rectangle </title>
- <Style>
- Body {background: url ("./images/bg3.jpg") repeat ;}
- # Canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto ;}
- </Style>
- </Head>
- <Body>
- <Div id = "canvas-warp">
- <Canvas id = "canvas">
- Does your browser support Canvas ?! Just change one !!
- </Canvas>
- </Div>
- <Script>
- Window. onload = function (){
- Var canvas = document. getElementById ("canvas ");
- Canvas. width = 800;
- Canvas. height = 600;
- Var context = canvas. getContext ("2d ");
- Context. fillStyle = "# FFF ";
- Context. fillRect (0, 0, 800,600 );
- DrawRoundRect (context, 200,100,400,400, 50 );
- Context. strokeStyle = "# 0078AA ";
- Context. stroke ();
- }
- Function drawRoundRect (cxt, x, y, width, height, radius ){
- Cxt. beginPath ();
- Cxt. arc (x + radius, y + radius, radius, Math. PI, Math. PI * 3/2 );
- Cxt. lineTo (width-radius + x, y );
- Cxt. arc (width-radius + x, radius + y, radius, Math. PI * 3/2, Math. PI * 2 );
- Cxt. lineTo (width + x, height + y-radius );
- Cxt. arc (width-radius + x, height-radius + y, radius, 0, Math. PI * 1/2 );
- Cxt. lineTo (radius + x, height + y );
- Cxt. arc (radius + x, height-radius + y, radius, Math. PI * 1/2, Math. PI );
- Cxt. closePath ();
- }
- </Script>
- </Body>
- </Html>
Running result:
We recommend that you create a rounded rectangle by yourself, which helps you grasp the path.
Next we will use this function to do something else.
Draw a 2048 game interface
I will not explain the code too much. I suggest you study the code yourself and try it out first. I am using hard encoding, so it is not very good. You can try to optimize it.
Copy the content to the clipboard using JavaScript Code
- <! DOCTYPE html>
- <Html lang = "zh">
- <Head>
- <Meta charset = "UTF-8">
- <Title> 2048 game page </title>
- <Style>
- Body {background: url ("./images/bg3.jpg") repeat ;}
- # Canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto ;}
- </Style>
- </Head>
- <Body>
- <Div id = "canvas-warp">
- <Canvas id = "canvas">
- Does your browser support Canvas ?! Just change one !!
- </Canvas>
- </Div>
- <Script>
- Window. onload = function (){
- Var canvas = document. getElementById ("canvas ");
- Canvas. width = 800;
- Canvas. height = 600;
- Var context = canvas. getContext ("2d ");
- Context. fillStyle = "# FFF ";
- Context. fillRect (0, 0, 800,600 );
- DrawRoundRect (context, 200,100,400,400, 5 );
- Context. fillStyle = "# AA7B41 ";
- Context. strokeStyle = "# 0078AA ";
- Context. stroke ();
- Context. fill ();
- For (var I = 1; I <= 4; I ++ ){
- For (var j = 1; j <= 4; j ++ ){
- DrawRoundRect (context, 200 + 16 * I + 80 * (I-1), 100 + 16 * j + 80 * (j-1), 80, 80, 5 );
- Context. fillStyle = "# CCBFB4 ";
- Context. strokeStyle = "# 0078AA ";
- Context. stroke ();
- Context. fill ();
- }
- }
- }
- Function drawRoundRect (cxt, x, y, width, height, radius ){
- Cxt. beginPath ();
- Cxt. arc (x + radius, y + radius, radius, Math. PI, Math. PI * 3/2 );
- Cxt. lineTo (width-radius + x, y );
- Cxt. arc (width-radius + x, radius + y, radius, Math. PI * 3/2, Math. PI * 2 );
- Cxt. lineTo (width + x, height + y-radius );
- Cxt. arc (width-radius + x, height-radius + y, radius, 0, Math. PI * 1/2 );
- Cxt. lineTo (radius + x, height + y );
- Cxt. arc (radius + x, height-radius + y, radius, Math. PI * 1/2, Math. PI );
- Cxt. closePath ();
- }
- </Script>
- </Body>
- </Html>
Running result:
After the function of this rounded rectangle is written, it can be encapsulated into the JS file by itself, and any good functions can be stored in the future, this file is a set of its own graphics library and game engine. Isn't it really cool?
In fact, game production is the main purpose of Canvas, but you must know that every game designer is an artist.
Drawing dialog box
You can try to use Canvas to draw a chat interface for practice and consolidation.
Here we use some knowledge to draw a rectangle, draw a rounded rectangle, draw a multi-line image, and fill the color. We haven't mentioned some Canvas text APIs yet, so you only need to be able to draw a rough interface. The Canvas API can be drawn out.
In fact, the above conversation is generated-"interface builder webpage version", which can be described as a derivative artifact. Is it really cool?
This is only the first version that took two days to write during the summer vacation. It has not been released yet. When I write this section, the page is still being optimized. You can try it on your own, or pay attention to and refer to my github: interface builder for this small project. This section does not repeat the interface code.
Now, I have learned all the basic Canvas drawing APIs. You can use your paint brush to make full use of it!
