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

This article mainly introduces the practical HTML5 local storage method has what related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that you will have something to gain after reading this practical HTML5 local storage method, let's take a look.

The HTML5 specification introduces many new features, one of the most anticipated of which is the Canvas element. HTML5 Canvas provides a way to draw graphics through JavaScript, which is easy to use but powerful. Each Canvas element has a "context" (imagine a page on the drawing board) in which arbitrary graphics can be drawn. Browsers support multiple Canvas contexts and provide graphics drawing capabilities through different API.

Most browsers support 2D Canvas contexts-including Opera,Firefox,Konqueror and Safari. And some versions of Opera also support 3D Canvas,Firefox and can also support 3D Canvas through plug-ins.

Let's start with our explanation:

Canvas Foundation

The way to create a Canvas is as simple as adding elements to the HTML page:

one

2 this is a case of Canvas tags

three

In order to reference Canvas in JavaScript, it is best to set ID for it; you also need to set the height and width for Canvas.

JavaScript is required to draw graphics on the Canvas canvas. You first find the Canvas element through the getElementById function, then initialize the context, and then you can use the context API to draw various graphics. The following script draws a rectangle in Canvas:

1 var elem = document.getElementById ('myCanvas')

2 if (elem & & elem.getContext) {

3 var context = elem.getContext ('2d')

4 if (context) {

5 context.fillRect (0,0,150,100)

6}

7}

You can place the above code in the head section of the document, or in an external JavaScript file.

2D context API

Now that you've seen how to create Canvas, let's take a look at 2D Canvas API and see what you can do with these functions.

In the above example, we showed how easy it is to draw a rectangle, and the fillStyle and strokeStyle properties make it easier to set the fill and lines of the rectangle. Color values are used in the same way as CSS: hexadecimal numbers, rgb (), rgba (), and hsla ().

With fillRect, you can draw a rectangle with a fill; with strokeRect, you can draw a rectangle with only a border without a fill. If you want to clear part of the Canvas, you can use clearRect. The parameters of the above three methods are the same: X, y, width, height. The first two parameters set the coordinates, and the last two parameters set the height and width of the rectangle.

Here is a JavaScript script for a comprehensive example:

1 context.fillStyle ='# 00f'

2 context.strokeStyle ='# f00'

3 context.lineWidth = 4

4 context.fillRect (0,0,150,50)

5 context.strokeRect (0,60,150,50)

6 context.clearRect (30, 25, 90, 60)

7 context.strokeRect (30, 25, 90, 60)

You can place the above code in the head section of the document, or in an external JavaScript file.

Path

You can draw any shape through the Canvas path (path). You can draw the outline first, and then draw the border and fill. It's easy to create custom shapes, start drawing with beginPath (), and then use lines, curves, and other graphics to draw your graphics. After drawing, call fill and stroke to add padding or set borders. Call closePath () to end the custom graphic drawing.

Here is a JavaScript script for a case of drawing triangles:

1 context.fillStyle ='# 00f'

2 context.strokeStyle ='# f00'

3 context.lineWidth = 4

4 context.beginPath ()

5 context.moveTo (10,10)

6 context.lineTo (100,10)

7 context.lineTo (10,100)

8 context.lineTo (10,10)

9 context.fill ()

10 context.stroke ()

11 context.closePath ()

You can place the above code in the head section of the document, or in an external JavaScript file.

Insert Ima

The drawImage method allows you to insert other images (img and Canvas elements) into the Canvas. In Opera, you can draw SVG graphics in Canvas. This method is complex and can have 3, 5, or 9 parameters:

Three parameters: the most basic usage of drawImage. One parameter specifies the location of the image, and the other two parameters set the position of the image in the Canvas.

5 parameters: intermediate drawImage usage, including the above 3 parameters, plus two parameters to indicate the width and height of the inserted image (if you want to change the image size).

Nine parameters: the most complex drawImage miscellaneous use method, including the above five parameters, the other four parameters set the position and height width in the source image. These parameters allow you to dynamically clip the source image before displaying it.

Here are examples of the above three usage methods:

1 context.drawImage (img_elem, dx, dy)

2 context.drawImage (img_elem, dx, dy, dw, dh)

3 context.drawImage (img_elem, sx, sy, sw, sh, dx, dy, dw, dh)

You can place the above code in the head section of the document, or in an external JavaScript file.

Pixel-level operation

2D Context API provides three methods for pixel-level operations: createImageData,getImageData and putImageData.

The ImageData object holds the image pixel values. Each object has three properties: width,height and data. The data attribute is of type CanvasPixelArray and is used to store width*height*4 pixel values. Each pixel has RGB values and transparency alpha values (values range from 0 to 255, including alpha.) . Pixels are stored in order from left to right, from top to bottom, by line.

Let's look at an example:

1 var imgd = context.createImageData (50, 50)

2 var pix = imgd.data

3 for (var I = 0; n = pix.length, I < n; I + = 4) {

4 pix [I] = 255

5 pix [iTunes 3] = 127

6}

7 context.putImageData (imgd, 0je 0)

Note: not all browsers implement createImageData. In supported browsers, you need to get the ImageData object through the getImageData method.

Many functions can be accomplished through ImageData. For example, you can achieve image filters, or you can achieve mathematical visualization (such as fractals and other special effects). Let's look at an example:

1 var imgd = context.getImageData (x, y width, height)

2 var pix = imgd.data

3 for (var I = 0, n = pix.length; I < n; I + = 4) {

4 pix [I] = 255-pix [I]

5 pix [iTun1] = 255-pix [iTun1]

6 pix [iTun2] = 255-pix [iTun2]

7}

8 context.putImageData (imgd,x, y)

You can place the above code in the head section of the document, or in an external JavaScript file.

Words

Although the recent version of WebKit and Firefox 3.1 nightly build only began to support Text API, I decided to introduce the text API here to ensure the integrity of the article.

The context object can set the following text properties:

Font: text fonts, same as CSS font-family attribute

TextAlign: horizontal alignment of text. Desirable attribute value: start,end,left,right,center. Default value: start

TextBaseline: vertical alignment of text. Desirable attribute value: top,hanging,middle,alphabetic,ideographic,bottom. Default value: alphabetic.

There are two ways to draw text: fillText and strokeText. The first draws text with a fillStyle fill, which draws text with only strokeStyle borders. The parameters of both are the same: the text to be drawn and the location of the text (xmemy) coordinates. There is also an optional option-maximum width. If necessary, the browser shrinks the text to fit the specified width.

The text alignment attribute affects the position of the text relative to the set (xmemy) coordinates.

1 ontext.fillStyle ='# 00f'

2 context.font = 'italic 30px sans-serif'

3 context.textBaseline = 'top'

4 context.fillText ('Hello worldview, 0,0)

5 context.font = 'bold 30px sans-serif'

6 context.strokeText ('Hello worldview, 0,50)

You can place the above code in the head section of the document, or in an external JavaScript file.

shadow

Currently, only Konqueror and Firefox 3.1 nightly build support Shadows API. The property of API is: shadowColor: shadow color. Its value is consistent with the CSS color value.

ShadowBlur: sets the shadow blur. The higher this value, the more blurred the shadow. The effect is the same as Photoshop's Gaussian Blur filter.

ShadowOffsetX and shadowOffsetY: the x and y offsets of shadows in pixels.

1 context.shadowOffsetX = 5

2 context.shadowOffsetY = 5

3 context.shadowBlur = 4

4 context.shadowColor = 'rgba (255,0,0,0.5)'

5 context.fillStyle ='# 00f'

6 context.fillRect (20,20,150,100)

You can place the above code in the head section of the document, or in an external JavaScript file.

Color gradient

In addition to the CSS color, the fillStyle and strokeStyle properties can be set to the CanvasGradient object. -- CanvasGradient allows you to use color gradients for lines and fills.

To create a CanvasGradient object, you can use two methods: createLinearGradient and createRadialGradient. The former creates a linear color gradient, while the latter creates a circular color gradient.

After you create a color gradient object, you can use the object's addColorStop method to add color intermediate values.

The following code demonstrates the use of color gradients:

1 var gradient1 = context.createLinearGradient (sx,sy,dx,dy)

2 gradient1.addColorStop (0,'# f00')

3 gradient1.addColorStop (0.5,'# ff0')

4 gradient1.addColorStop (1,'# 00f')

5 var gradient2 = context.createRadialGradient (sx,sy,sr,dx,dy, dr)

You can place the above code in the head section of the document, or in an external JavaScript file.

This is the end of this article on "what are the practical local storage methods for HTML5?" Thank you for reading! I believe you all have a certain understanding of "what are the practical local storage methods of HTML5". If you want to learn more, you are welcome to follow the industry information channel.

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.