HTML5 draws complex shapes and effects in the canvas, html5canvas
HTML5 draws complex shapes and effects in canvas
1. Draw complex shapes or paths
When a simple rectangle cannot meet the requirements, the following method is provided for drawing a complex shape or path.
BeginPath (): start to draw a new path.
ClosePath (): draws a line segment from the current point to the starting point of the path to close the shape.
Fill (), stroke (): fill shape or draw hollow shape.
MoveTo (): Move the current vertex to the point (x, y ).
LineTo (): draws a straight line (x, y) from the current point ).
Arc (x, y, r, sAngle, eAngle, counterclockwise): draws an arc-to-point (x, y) with a specified radius ).
2. Follow these steps to draw complex shapes
Use beginPath () to start creating a path.
Use moveTo (), lineTo (), arc (), and methods to create line segments.
Use closePath () to end the painting and close the shape (optional ).
Use stroke () or fill () to draw the outer border or fill shape of the path. Using fill () will automatically close all unclosed paths.
Iii. arc () Rendering instructions
4. Draw complex shapes in the canvas
The Code is as follows:
<! DOCTYPEhtml> <Htmlxmlns = "http://www.w3.org/1999/xhtml"> <Head> <Metahttp-equiv = "Content-type" content = "text/html; charset = UTF-8"> <Title> HTML5 </title> <Scripttype = "text/javascript" charset = "UTF-8"> // This function will be called after the page is fully loaded Function pageLoaded (){ // Obtain the reference of the canvas object. Note that the tCanvas name must be the same as the id in the following body. Var canvas = document. getElementById ('tcanvas '); // Obtain the 2D drawing environment of the canvas Var context = canvas. getContext ('2d '); // The draw code will appear here // Draw complex pig // Fill triangle Context. beginPath (); Context. moveTo (10,120); // starts from (10, 20) Context. lineTo (10,180); // indicates that the image starts from (10,120) and ends with (10,180 ). Context. lineTo (110,150); // indicates that the image starts from (10,180) and ends with (110,150 ). Context. fill (); // close the shape and draw it in filling mode // The outer border of the triangle Context. beginPath (); Context. moveTo (140,160); // starts from the vertex (140,160) Context. lineTo (140,220 ); Context. lineTo (40,190 ); Context. closePath (); // close the path Context. stroke (); // fill in with hollow // A complex Polygon Context. beginPath (); Context. moveTo (160,160); // starts from the vertex (160,160) Context. lineTo (170,220 ); Context. lineTo (240,210 ); Context. lineTo (260,170 ); Context. lineTo (190,140 ); Context. closePath (); Context. stroke (); // Draw an arc // Draw a semi-Arc Context. beginPath (); // Draw an arc with a radius of 40 and an angle from 0 to 100,300 degrees counterclockwise at (180 ). Context. arc (100,300, 40, 0 * Math. PI, 1 * Math. PI, true); // The radian of PI is 180 °. Context. stroke (); // Draw a solid circle Context. beginPath (); // Draw an arc with a radius of 30 and an angle of 0 to 100,300 degrees counterclockwise at (360 ). Context. arc (100,300, 30, 0 * Math. PI, 2 * Math. PI, true); // 2 * Math. PI is 360 ° Context. fill (); // Draw a 3/4 arc Context. beginPath (); // Draw an arc with a radius of 25 clockwise and an angle of 0 to 200,300 ° at (270 ). Context. arc (200,300, 25, 0 * Math. PI, 3/2 * Math. PI, false ); Context. stroke (); } </Script> </Head> <Bodyonload = "pageLoaded ();"> <Canvaswidth = "400" height = "400" id = "tCanvas" style = "border: black1pxsolid;"> <! -- The following font is displayed if the browser does not support it --> Tip: your browser does not support Tag </Canvas> </Body> </Html> |
5. Draw Results
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
