HTML5 Project Note 3: Design an offline system logo using canvas

HTML5 's Cavans API allows you to dynamically display graphics, charts, images, and animations, which are used primarily for logo design in our off-line system. When using canvas on a Web page, he creates a rectangular area, which, by default, is 300 pixels wide and 150 pixels high, and of course it can be customized.

Because our offline system is primarily responsible for working in offline situations, such as writing a logbook, working plan, and saving evaluation data for a project, interacting with the server in the case of network online, and saving the data to the server's database. So our offline system is named Oflmail, and we design the logo according to that name.

The coordinates in the canvas start from the upper-left corner, the x-axis stretches from left to right, and the y-axis extends vertically from top to bottom. The position of a coordinate is positioned by its engraved measurement.

Let's first place a canvas element on the page:

<canvas id= ' canvas ' width= ' 380 ' height= ' >sorry ', canvas not supported...</canvas>

With canvas programming, you first get its contextual context.

function Makelogo () {

var canvas = document.getElementById ("Canvas");

if (Canvas.getcontext) {

var ctx = Canvas.getcontext ("2d");

}

}

Our first word is O, so let's draw the O character first, using the Circle function:

Context. Arc (x, y, radius, startangle, Endangle, anticlockwise)

The parameters are:

X: horizontal coordinate position;

Y: vertical axis coordinate position;

The angle at which the circle begins;

The angle of the circle closure;

Whether to draw counterclockwise (true or false);

Ctx.arc (+, 0, 9.42, true); Start drawing a circle

Ctx.linewidth = 3; How thick the line is

Ctx.linejoin = ' round '; Returns or sets the way the line segment is connected by default to Miter

Miter	The segment extends outside the connection until it is handed over to a point, and the epitaxial effect is affected by the value of Miterlimit, when the epitaxial When the point distance is greater than the limit value, it behaves as bevel style
Round	The connection is a rounded corner, and the radius of the circle equals the line width
Bevel	Angled at the junction

Ctx.linecap = ' round ';//context.linecap Returns or sets the arrowhead style for the segment, with only three options: Butt (default), Round,square;

Butt	Each line of the head and tail are rectangular, that is, do not do any processing, for the default value
Round	A semicircle arrow is added to the head and tail of each line.
Square	A rectangle is added to the head and tail of each line, and the length is half the line width and the height is the line width

Ctx.strokestyle = ' #23A1DD ';//Fill Color

Ctx.shadowblur = 4; Shadow Blur degree, default is 0, the greater the value, the higher the degree of blurring, the more obvious the feeling

Ctx.shadowcolor = ' #909090 '; Shadow color

Ctx.shadowoffsetx = 1; Shadow pixels on the horizontal axis

Ctx.shadowoffsety = 1; Shadow pixels for vertical axes

Create character F

Ctx.moveto (41,35); Move the location of the data context to the coordinate location of (41,35)

Ctx.lineto (41, 2); Move the location of the data context to the coordinate location of (41,35)

Ctx.lineto (61,2);

Ctx.moveto (41,15);

Ctx.lineto (71,15);

Ctx.stroke ();//stroke methods use Linewidth,linecap,linejoin and Strokestyle to populate all sub-paths

Ctx.save ();//Save Data context

The effect is as follows:

Continue to depict the L and M characters above

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:

At this point we are going to fill a picture, instead of a character,

Context.beginpath ()//Clear Empty path

Context.closepath ()//closed path

Ctx.beginpath (); The benefit of starting the execution path is to clear the current path. Start executing the new path, and some of the original settings will be erased

Ctx.moveto (145, 2);

var img1 = new Image ();

IMG1.SRC = ". /images/1.png ";

Img1.onload = function () {

Ctx.drawimage (IMG1, 145, 2);

Parameters of the DrawImage function, DrawImage (image,dx,dy)

Image: Incoming image dx: Left coordinate dy: left coordinate

Ctx.stroke ();

Ctx.save ();

}

The final effect is as follows:

Of course, this triangle picture can also be directly used in the context to draw out, we have a picture here, directly with the image loaded on the line.

Finally, we use the same method to complete the rest of the logo above:

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 little fresh logo is like this:

According to the proposal, if only simple words and pictures of the description, with the H tag can be solved, the picture can also be embedded in other elements in the tag. So it's a bit more cumbersome for us to create this icon with canvas, but in a variety of logo icons, there are some features of the canvas, such as:

Conversion: Transformations,

Context.rotate (angle)

Context.scale (float x, float y);

The horizontal and vertical axes are enlarged or shrunk, and 1.0 is a 1:1 ratio, and the larger the value, the larger the magnification.

such as: Context.scale (1.0,1.0):

Context.scale (5.0,5.0):

Context.translate (x, y)//can be interpreted as an offset, offset to x, y direction, the specified amount, which is used to move the canvas's origin to a specified value

Context.strokestyle = "#9CFF00";

Context.translate (+ J * +, + i * 100);

Drawspirograph (Context, * (j + 2)/(j + 1), 8 * (i + 3)/(i + 1), 10);

Context.restore ();

The Canvas API also provides a number of functions to assist in processing and designing a wide variety of images.

Another interesting thing about animation is that in the HTML5 canvas API, the clear rectangle function of canvas is the core function of creating animations and games. By repeatedly abandoned and erasing canvas fragments, you can achieve animation effects, you might as well try.

HTML5 Project Note 3: Design an offline system logo using canvas