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

This article is to share with you about the usefulness of HTML5 Canvas. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Is a new HTML element that can be used by the Script language (usually JavaScript) to draw graphics. For example, you can use it to draw pictures, synthesize images, or do simple (and not so simple) animations. The image on the right shows some examples of applications, and we will see their implementation in this tutorial.

It was first introduced on Apple's Mac OS X Dashboard and then applied to Safari. Gecko1.8-based browsers, such as Firefox 1.5, also support this new element. Elements are part of the WhatWG Web applications 1.0, also known as the HTML 5 standard specification.

In this tutorial, I will try to explain how to use elements in your own web pages. The examples provided should give you a clear idea of what you can do. These examples can also be used as a starting point for your application.

Before you start using it

It is not difficult to use elements, as long as you have basic knowledge of HTML and JavaScript.

As mentioned above, not all modern browsers support elements, so you need Firefox 1.5 or later, or other Gecko-based browsers such as Opera 9, or a recent version of Safari to see all the sample actions.

element

Let's start this tutorial by looking at the element itself.

Let's start with the definition of the element.

This looks a lot like the

Element, the only difference is that it doesn't have the src and alt attributes. It looks like it.

The only difference is that it does not contain src and alt attributes The element has only two attributes-width and height. These are both optional and can also be set using DOM properties or CSS rules. It has only two properties, width and height, both of which are optional and can be set by DOM or CSS. When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. If you do not specify width and height, the default is 300 pixels wide and 150 pixels high. The element can be sized arbitrarily by CSS, but during rendering the image is scaled to fit its layout size. (If your renderings seem distorted, try specifying your width and height attributes explicitly in the attributes, and not with CSS.) Although you can resize the canvas through CSS, the rendered image will be scaled to fit the layout (if you find that the rendering looks deformed, you don't have to rely on CSS, you can try to explicitly specify the width and height property values of canvas).

The id attribute isn't specific to the element but is one of default HTML attributes which can be applied to (almost) every HTML element (like class for instance). It's always a good idea to supply an id because this makes it much easier to identify it in our script.

The id attribute is not exclusive, just like the standard HTLM tag, any HTML element can specify its id value. In general, it's a good idea to specify an id for an element, which makes it easier to use in scripts.

The element can be styled just like any normal image (margin, border, background, etc). These rules however don't affect the actual drawing on the canvas. We'll see how this is done later in this tutorial. When no styling rules are applied to the canvas it will initially be fully transparent. Elements can specify their styles (margins, borders, backgrounds, etc.) just like normal pictures. However, these styles have little effect on the images actually generated by canvas. Next we will see how to apply styles. If you do not specify a style, canvas is fully transparent by default.

Alternate content

Because the element is still relatively new and isn't implemented in some browsers (such as Firefox 1.0 and Internet Explorer), we need a means of providing fallback content when a browser doesn't support the element.

Because it is relatively new and some browsers are not implemented, such as Firefox 1.0 and Internet Explorer, we need to provide alternate display content for browsers that do not support canvas.

Luckily this is very straightforward: we just provide alternative content inside the canvas element. Browsers who don't support it will ignore the element completely and render the fallback content, others will just render the canvas normally.

For instance we could provide a text description of the canvas content or provide a static image of the dynamically rendered content. This can look something like this:

We just need to insert substitute content directly into the canvas element. Browsers that do not support canvas will ignore the canvas element and render alternate content directly, while supported browsers will render canvas normally. For example, we can fill in some words or pictures into canvas as substitute content:

Current stock price: $3.15 + 0.15

The closing tag is required

In the Apple Safari implementation, is an element implemented in much the same way

Is; it does not have an end tag. However, for to have widespread use on the web, some facility for fallback content must be provided. Therefore, Mozilla's implementation requires an end tag ().

In Apple Safari, the implementation is similar to that of

Similarly, it doesn't have a closing tag. However, in order to be widely applicable in the world of web, you need to provide a place for substitute content, so it is necessary to end the tag () in the implementation of Mozilla.

If fallback content is not needed, a simple will be fully compatible with both Safari and Mozilla-- Safari will simply ignore the end tag.

If there is no alternate content, it is fully compatible with Safari and Mozilla-Safari simply ignores the closing tag.

If fallback content is desired, some CSS tricks must be employed to mask the fallback content from Safari (which should render just the canvas), and also to mask the CSS tricks themselves from IE (which should render the fallback content).

If there are alternatives, you can use some CSS techniques to hide them for and only for Safari, because those alternatives need to be displayed in IE but not in Safari.

Rendering context (Rendering Context)

Creates a fixed size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown. We'll focus on the 2D rendering context, which is the only currently defined rendering context. In the future, other contexts may provide different types of rendering; for example, it is likely that a 3D context based on OpenGL ES will be added.

The created fixed-size drawing screen opens one or more rendering contexts (rendering context) through which we can control what is displayed. We focus on 2D rendering, which is currently the only option, and may add an OpenGL ES-based 3D context in the future.

The is initially blank, and to display something a script first needs to access the rendering context and draw on it. The canvas element has a DOM method called getContext, used to obtain the rendering context and its drawing functions. GetContext () takes one parameter, the type of context.

The initialization is blank, and its rendering context (rendering context) is first needed to draw with a script above, which can be obtained through the getContext method of the canvas element object, as well as some drawing functions. GetContext () accepts a value that describes its type as a parameter.

Var canvas = document.getElementById ('tutorial'); var ctx = canvas.getContext (' 2d')

In the first line we retrieve the canvas DOM node using the getElementById method. We can then access the drawing context using the getContext method.

The first line above gets the DOM node of the canvas object through the getElementById method. Then the drawing operation context is obtained through its getContext method.

Check browser support

The fallback content is displayed in browsers which do not support; scripts can also check for support when they execute. This can easily be done by testing for the getContext method. Our code snippet from above becomes something like this:

In addition to displaying alternative content on browsers that are not supported, you can also check whether the browser supports canvas by scripting. The method is simple to determine whether getContext exists or not.

Var canvas = document.getElementById ('tutorial'); if (canvas.getContext) {var ctx = canvas.getContext (' 2d'); / / drawing code here} else {/ / canvas-unsupported code here} code template

Here is a minimalistic template, which we'll be using as a starting point for later examples. You can download this file to work with on your system.

We will start with the following simplest code template (which will be used in subsequent examples). You can download the file to a local backup.

Canvas tutorial function draw () {var canvas = document.getElementById ('tutorial'); if (canvas.getContext) {var ctx = canvas.getContext (' 2d');} canvas {border: 1px solid black;} Thank you for reading! This is the end of this article on "what's the use of HTML5 Canvas?". I hope the above content can be of some help to you, so that 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.