HTML5OfCavans APIImages, charts, images, and animations can be dynamically displayed. Our offline system is mainly used to designLogo. Use on Web pagesCanvasIn the left-side navigation pane.300Pixel, height150Pixels, of course, can be customized.
Because our offline system is mainly responsible for working systems in offline situations, such as writing work logs, work plans, and saving project evaluation data; when the network is online, it interacts with the server and saves the data to the server.. So our offline system is namedOflmailWe will design it based on this name.Logo.
CanvasThe coordinates start from the upper left corner,XThe axis is horizontally extended from left to right,YThe axis is vertical from top to bottom. Position of a coordinate based on the number of moments.
We first place a canvas on the pageElement:
<Canvas id = "canvas" width = "380" Height = "35"> sorry, canvas not supported... </canvas>
Use canvasFor programming, you must first obtain the contextContext.
Function makelogo (){
VaR canvas = Document. getelementbyid ("canvas ");
If (canvas. getcontext ){
VaR CTX = canvas. getcontext ("2D ");
}
}
The first word is O, so we can draw the O character first and use the circle function:
Context. ARC (X, Y, radius, startangle, endangle, anticlockwise)
The parameters are:
X: coordinates of the horizontal axis;
Y: Coordinate Position of the vertical axis;
The starting angle of the circle;
Angle of circle closure;
Whether to draw it counterclockwise (true or false );
CTX. ARC (17, 17, 15, 0, 9.42, true); // starts circle
CTX. linewidth = 3; // line width
CTX. linejoin = 'round '; returns or sets the connection mode of a line segment. The default value is miter.
Miter |
The line segment is extended outside the connection until it is handed over to a point, which is the default value. The extension effect is affected by the value of miterlimit. When the distance between points is greater than the limit value, it is in the bevel style. |
Round |
The connection is a rounded corner, and the radius of the circle is equal to the width of the line. |
Bevel |
The connection is at the oblique angle. |
CTX. linecap = 'round '; // context. linecap returns or sets the arrow style of a line segment. There are only three options: Butt (default), round, square;
Butt |
The header and tail of each line are rectangular, that is, they are not processed. The default value is |
Round |
Add a semi-circular arrow at the beginning and end of each line. |
Square |
A rectangle is added to the header and tail of each line. The length is half the width of the line and the height is the width of the line. |
CTX. strokestyle = '# 23a1dd'; // fill color
CTX. shadowblur = 4; // shadow blur degree. The default value is 0. The greater the value, the greater the Blur degree. The more obvious the shadowblur feels.
CTX. shadowcolor = '#909090'; // shadow color
CTX. shadowoffsetx = 1; // shadow pixel of the horizontal axis
CTX. shadowoffsety = 1; // shadow pixel of the vertical axis
// Create character F
CTX. moveTo (); // move the location of the data context to the Coordinate Position ()
CTX. lineto (41, 2); // move the location of the data context to the Coordinate Position ()
CTX. lineto (61,2 );
CTX. moveTo (41,15 );
CTX. lineto (71,15 );
CTX. Stroke (); // use linewidth, linecap, linejoin, and strokestyle to fill all sub-paths.
CTX. Save (); // Save the data context
The effect is as follows:
// Continue to draw L and M characters on it
CTX. moveTo (77,-1); // create the L
CTX. lineto (77, 32 );
CTX. lineto (102, 32 );
CTX. moveTo (103, 34); // create the m
CTX. lineto (103, 0 );
CTX. lineto (120, 20 );
CTX. lineto (137, 0 );
CTX. lineto (137, 34 );
The final effect is as follows:
// Fill in an image on it to replace the character,
// Context. beginpath () // clear the sub-Path
// Context. closepath () // closed path
CTX. beginpath (); // start execution path. The advantage of this is to clear the current path and start executing a new path. All the original settings will be cleared.
CTX. moveTo (145, 2 );
VaR img1 = new image ();
Img1.src = "../images/1.png ";
Img1.onload = function (){
CTX. drawimage (img1, 145, 2 );
// Drawimage function parameter, drawimage (image, dx, Dy)
// Image: input image DX: Left coordinate DY: Left Coordinate
CTX. Stroke ();
CTX. Save ();
}
The final effect is as follows:
Of course, this triangle image can also be drawn directly using context. We have images on our side, just load them with images.
Finally, we use the same method to complete the rest of the above logo:
CTX. beginpath (); // create the I
CTX. shadowblur = 4;
CTX. shadowoffsetx = 0;
CTX. shadowoffsety = 0;
CTX. moveTo (202, 3); // create the o
CTX. strokestyle = '# 23a1dd ';
CTX. fillstyle = '# 23a1dd ';
CTX. ARC (185, 3, 3, 0, math. Pi * 2, true );
CTX. Fill ();
CTX. Save ();
CTX. beginpath ();
CTX. moveTo (185, 35 );
CTX. lineto (185, 10 );
CTX. moveTo (200, 0 );
CTX. lineto (200, 33 );
CTX. lineto (222, 33 );
CTX. Save ();
CTX. Stroke ();
CTX. beginpath ();
CTX. shadowblur = 1;
CTX. shadowoffsetx = 0;
CTX. shadowoffsety = 0;
In the end, our small fresh logo looks like this:
Based on W3C recommendations, if you only use a simple description of text and images, you can use the H tag to solve the problem. Images can also be embedded into tags with other elements. Therefore, it is more complicated to use canvas to dynamically generate this icon. However, in diversified logo icons, some canvas features are required, such:
Conversion: transformations,
Context. Rotate (angle)
Context. Scale (float X, float y );
The ratio of 1.0 to is increased or decreased between the horizontal and vertical axes.
For example, context. Scale (1.0, 1.0 ):
Context. Scale (5.0, 5.0 ):
Context. Translate (x, y) // it can be understood as offset, which is the specified amount of offset to the X and Y directions. It is used to move the origin of the canvas to a specified value.
Context. strokestyle = "#9cff00 ";
Context. Translate (50 + J * 100, 50 + I * 100 );
Drawspirograph (context, 20 * (J + 2)/(J + 1),-8 * (I + 3)/(I + 1), 10 );
Context. Restore ();
The canvas API also provides many functions to help you process and design a variety of images.
Another interesting thing is animation. In the HTML5 canvas API, the canvas erasing function is the core function for creating animations and games. You can reuse and clear canvas fragments to achieve the animation effect. You may wish to give it a try.
The attachment contains the source code of the logo and the html5canvas API. For more information, see.
Canvas API 1.0 user help documentation source code