Shulou(Shulou.com)06/03 Report--

This article introduces you how to create a HTML5 Canvas canvas, the content is very detailed, interested friends can refer to, hope to be helpful to you.

The way to create an Canvas canvas is as follows:

The code is as follows:

You can add alternate text to the label when the tag is not available, as follows:

The code is as follows:

Your browserdoes not support the canvas element.

At present, all kinds of browsers in the new version have gradually begun to support HTML5, so make sure that your browser is a new version of Chrome, Firefox or above IE9 before you start using it.

The tag itself does not have the ability to draw, it only provides an area for JavaScript to draw an image, so the drawing work needs to be completed in JavaScript. The following is the preparation required before drawing:

The code is as follows:

Var canvas = document.getElementById ("canvas")

Var context2D = canvas.getContext ("2d")

First you need to get the canvas object in the web page, and then use the getContext () method to get the two-dimensional drawing object from the canvas. The parameter "2d" of the getContext () method means two-dimensional (it is said that it will be extended to three-dimensional later, while the only parameter currently available is "2d").

The resulting Context object is the built-in object of HTML5, which contains many methods of drawing and adjusting graphics. By operating it in JavaScript, you can draw the desired graphics in the Canvas canvas.

String

Use the fillText () method of the Context object to draw strings in the canvas. The prototype of the fillText () method is as follows:

Void fillText (text, left,top, [maxWidth])

The meaning of the four parameters is divided into: the string to be drawn, the Abscissa and ordinate of the upper left corner in the canvas when drawn into the canvas, and the maximum length of the string drawn. Where the maximum length maxWidth is an optional parameter.

In addition, you can adjust the font and size of the string by changing the font property of the Context object, which defaults to "10px sans-serif".

The following example shows the string "Hello Canvas!" in the canvas (the upper-left corner of the string is in the center of the canvas).

The code is as follows:

Your browserdoes not support the canvas element!

_ window.onload = function () {

Var canvas = document.getElementById ("canvas")

Var context2D = canvas.getContext ("2d")

Context2D.font = "35px Times New Roman"

Context2D.fillText ("HelloCanvas!", canvas.width / 2, canvas.height / 2)

}

Path

The basic graphics of HTML5 Canvas are based on paths. Usually use the Context object moveTo (), lineTo (), rect (), arc () and other methods to trace the path point of the graph in the canvas, and then use the fill () or stroke () method to fill the graph or draw lines according to the path point.

Usually, before you start drawing a path, you need to call the beginPath () method of the Context object, which clears the previous path and reminds Context to start drawing a new path, otherwise, when the stroke () method is called, all the previous paths will be drawn, affecting the drawing effect, as well as the performance of the web page due to repeated operations. In addition, calling the closePath () method of the Context object explicitly closes the current path, but does not clear the path.

Here are some prototypes of ways to depict a path:

Void moveTo (x, y)

Lets you explicitly specify the start point of the path. By default, the starting point of the first path is the (0,0) point of the canvas, and the subsequent starting point is the end of the previous path. The two parameters are divided into x and y coordinate values that represent the starting point.

Void lineTo (x, y)

Used to draw a straight path from the starting point to a specified location, and when the drawing is complete, the drawn starting point is moved to that specified location. Parameter represents the x and y coordinate values of the specified location.

Void rect (left, top,width, height)

Used to depict a rectangle that knows the vertex position and width and height of the upper-left corner. When the drawing is finished, the starting point of the Context is moved to the vertex of the upper-left corner of the rectangle. Parameters represent the x and y coordinates of the vertices in the upper-left corner of the rectangle and the width and height of the rectangle.

Void arcTo (x1, y1, x2, y2 radius)

It is used to draw an arc tangent to two line segments, which start with the current Context drawing start point and (x2, y2) point as the starting point, both end at the (x1, y1) point, and the radius of the arc is radius. When the drawing is complete, the starting point of the drawing moves to the tangent point of the segment and arc starting with (x2, y2).

Void arc (x, y, radius,startAngle, endAngle, anticlockwise)

It is used to draw an arc with (x, y) point as the center, radius as the radius, startAngle as the starting Radian and endAngle as the ending Radian. Anticlockwise is a Boolean parameter, true is counterclockwise, and false is clockwise. The two radians in the parameter take 0 for 0 °and the position is at 3 o'clock, while the Math.PI value indicates 180 °and the position is at 9 o'clock.

Void quadraticCurveTo (cpx,cpy, x, y)

Used to draw a quadratic spline path with the current Context drawing starting point as the starting point, (cpx,cpy) point as the control point, and (x, y) point as the end point.

Void bezierCurveTo (cpx1,cpy1, cpx2, cpy2, x, y)

Used to draw a Bezier curve path with the current Context drawing starting point as the starting point, (cpx1,cpy1) point and (cpx2, cpy2) point as two control points, and (x, y) point as the end point.

After the path is drawn, you need to call the fill () and stroke () methods of the Context object to fill the path and draw the path lines, or call the clip () method to clip the Canvas area. The prototypes of the above three methods are as follows:

Void stroke ()

Used to draw lines according to an existing path.

Void fill ()

Used to fill the area of the path with the current fill style.

Void clip ()

Lets you set the clip region in the canvas according to the existing alignment. After calling the clip () method, the graphics drawing code works only on the clip region and no longer affects the canvas outside the area. If the path is not depicted before the call (that is, by default), the resulting clip region is the entire Canvas region.

In addition, the Context object provides properties to adjust the line and fill style, as shown below:

StrokeStyle

The color of the line, which defaults to "# 000000", can be set to the CSS color value, gradient object, or mode object.

FillStyle

The color of the fill, which defaults to "# 000000". Like strokeStyle, the value can also be set to the CSS color value, gradient object, or mode object.

LineWidth

The width of the line, in pixels (px), which defaults to 1.0.

LineCap

Line end style, there are butt (none), round (round head), square (square head) three types to choose from, the default is butt.

LineJoin

The style of the turning point of the line, there are round (fillet), bevel (flat corner), miter (sharp angle) three kinds; type to choose from, the default is miter.

MiterLimit

Sharp program for sharp corners of lines, default is 10.

The following example calls some of the above methods and properties to draw the graph:

The code is as follows:

Your browserdoes not support the canvas element!

_ window.onload = function () {

Var canvas = document.getElementById ("canvas")

Var context2D = canvas.getContext ("2d")

/ / draw intersecting segments

Context2D.beginPath ()

Context2D.moveTo (50 and 50)

Context2D.lineTo (100100)

Context2D.moveTo (200550)

Context2D.lineTo (100100)

Context2D.stroke ()

/ / draw a red arc tangent to the two segments

Context2D.beginPath ()

Context2D.strokeStyle= "# ff0000"

Context2D.moveTo (50 and 50)

Context2D.arcTo (100,200,50,100)

Context2D.stroke ()

/ / draw a blue circle

Context2D.beginPath ()

Context2D.strokeStyle= "# 0000ff"

Context2D.arc (300, 250,100,0, Math.PI * 2, false)

Context2D.stroke ()

/ / fill the upper circle with gray

Context2D.fillStyle = "# a3a3a3"

Context2D.fill ()

/ / clip a circular square area in the circle above

Context2D.beginPath ()

Context2D.rect (250,200,100,100)

Context2D.clip ()

/ / fill the clip region with a rectangle larger than the size of the region

Context2D.fillStyle = "yellow"

Context2D.fillRect (0,400,400)

}

Canvas background

In the above example, the fillRect () method is called. In fact, Context objects have three ways to draw graphics directly on the canvas without the need for a path, and can be thought of as drawing directly in the canvas background. The prototypes of these three methods are as follows:

Void fillRect (left, top,width, height)

Lets you fill a rectangle with the current fillStyle (default is "# 000000", black) style with the upper-left vertex at (left, top) point, width wide and height high.

Void strokeRect (left, top,width, height)

Use the current line style to draw a rectangular border with the top left vertex at the (left, top) point, width wide and height high.

Void clearRect (left, top,width, height)

Clears all the contents of the upper-left vertex in a rectangular area with a width of width and a height of height at the (left,top) point.

Picture

The drawImage () method in the Context object allows you to draw an external picture into Canvas. The three prototypes of the drawImage () method are as follows:

DrawImage (image, dx, dy)

DrawImage (image, dx, dy,dw, dh)

DrawImage (image, sx, sy,sw, sh, dx, dy, dw, dh)

Where the image parameter can be HTMLImageElement, HTMLCanvasElement, or HTMLVideoElement. The sx and sy in the third method prototype are both 0dsw and sh are the width and height of image itself in the first two prototypes, and the dw and dh in the second and third prototypes are also the width and height of image itself in the first one.

The following example draws a remote picture into the canvas:

The code is as follows:

Your browserdoes not support the canvas element!

_ window.onload = function () {

Var canvas = document.getElementById ("canvas")

Var context2D = canvas.getContext ("2d")

Var pic = new Image ()

Pic.src = "http://imgsrc.baidu.com/forum/pic/item/e6b14bc2a4561b1fe4dd3b24.jpg";

Context2D.drawImage (pic,0, 0)

}

The above code has been tested by Google Chrome 14.0 and Mozilla Firefox 7.0browser.

On how to create a HTML5 Canvas canvas to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.