Html5 canvas draws the instance code of rectangle and circle, html5canvas
Html5 canvas instance code for drawing Rectangles and circles
Copy the content to the clipboard using JavaScript Code
- <! DOCTYPE html>
- <Html>
- <Head>
- <Meta charset = "UTF-8">
- <Title> </title>
- </Head>
- <Body onload = "draw (), drawarc ()">
- <! -- Draw steps: Get the canvas Element-> Get context-> Fill and draw borders-> set the drawing style -->
- <! -- Use the path to draw other complex images: start to create a path-> close a path-> draw a graph -->
- <! -- Eg: Draw a rectangle -->
- Draw a rectangle: <canvas id = "ca"> </canvas> <br/>
- Draw a circle: <canvas id = "yuan"> </canvas>
- </Body>
- </Html>
- <Script>
- // Draw a rectangle
- Function draw (){
- Var canvas = document. getElementById ('CA'); // get the canvas Element
- If (canvas = null)
- Return false;
- Var context = canvas. getContext ('2d '); // obtain the context
- Context. fillStyle = '# EEEFF'; // fill color
- Context. fillRect (0, 0, 400,300); // fill the rectangle (rectangle 1)
- Context. fillStyle = 'red ';
- Context. strokeStyle = 'blue'; // border color
- Context. lineWidth = 1; // Border Width
- Context. fillRect (50, 50, 100,100); // fill the rectangle (Interior rectangle 2)
- Context. strokeRect (50, 50, 100,100); // draw a border
- }
- // Draw a circle
- Function drawarc (){
- Var canvas2 = document. getElementById ('yuanyuan '); // obtain the canvas Element.
- If (canvas2 = null)
- If (canvas2 = null)
- Return false;
- Var context2 = canvas2.getContext ('2d '); // obtain the context
- Context2.fillStyle = '# EEEEEF ';
- Context2.fillRect (0, 0, 400,300 );
- Var n = 0;
- For (var I = 0; I <10; I ++ ){
- Context2.beginPath (); // start to create a path
- Context2.arc (I * 25, I * 25, I * 10, 0, Math. PI * 2, true); // create a circular path
- Context2.closePath (); // close the path
- Context2.fillStyle = 'rgba (0.25, 0,) '; // set the color
- Context2.fill (); // fill the image
- }
- }
- </Script>
The above is the full content of the html5 canvas instance code for drawing Rectangles and circles. I hope you can support the steps.
