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

This article is about how to use the included content in HTML5 Canvas tags. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

I. basic concepts

What is Canvas?

? Is it a new HTML? Element, this element is located in HTML5? Is defined in the. This element can usually be used in HTML? The page passes through JavaScript? Draw graphics, composite images and other operations, can also be used to do some animation. Of course, right now? HTML5? The specification is still in the draft stage, and the official release may not be until 2010, but now many browsers already support part of it. HTML5? Norms. Currently supports? canvas? The browsers of elements are? Firefox?3+, Safari?4, Chrome?2.0+? So, when running the examples on this page, make sure you are using one of the above browsers.

Although in Mozilla? There has been a lot about Canvas. In the tutorial, I decided to record my learning process. If you think my writing is not clear enough, then you can find it in Resources? Mozilla? On the website? Canvas? Links to tutorials.

Besides, you can find some interesting Canvas here. Example

Start using Canvas

Use Canvas? Very simple, with the use of other HTML? Element, you only need to add a tag to the page:

The code is as follows:

Of course, this simply creates a Canvas. Object, no operation has been done on it, at this time? canvas? The element looks the same as div? There is no difference between elements, and nothing can be seen on the page:)

Besides, canvas? The size of the element can be passed through? width? With height? Property to specify, which is related to? img? The elements are a little similar.

Canvas? The core of: Context mentioned earlier that you can pass through? JavaScript? To operate? Canvas? Object to draw graphics, synthesize images and other operations, these operations are not through? Canvas? The object itself, but through? Canvas? A method of object? getContext? Get Canvas? The context of the operation. That is to say, we will use Canvas later. In the process of the object, it is all with? Canvas? Context of the object? Dealing with Canvas? The object itself can be used to obtain Canvas? Information such as the size of the object.

To get Canvas? Context of the object? It's very simple, directly call? canvas? Elemental getContext? Method, and you need to pass a Context? Type parameter, currently available and the only available type value is? 2d:

Var canvas = document.getElementById ("screen")

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

Firefox?3.0.x? Embarrassment

Firefox?3.0.x? Although supported? canvas? Element, but not fully implemented in accordance with the specification, fillText, measureText? There are two ways to Firefox?3.0.x? How many of them? Firefox? A unique way to replace it, so in? Firefox?3.0.x? Canvas? When you need first? fix? The differences between these methods in different browsers.

The following code is taken from? Mozilla?Bespin? Project, it revised? Firefox?3.0.x? Medium? Canvas? Context? Date and HTML5? Inconsistencies in the specifications:

Function fixContext (ctx) {

/ / * upgrade Firefox 3.0.x text rendering to HTML 5 standard

If (! ctx.fillText & & ctx.mozDrawText) {

Ctx.fillText = function (textToDraw, x, y, maxWidth) {

Ctx.translate (x, y)

Ctx.mozTextStyle = ctx.font

Ctx.mozDrawText (textToDraw)

Ctx.translate (- x,-y)

}

}

/ / * Setup measureText

If (! ctx.measureText & & ctx.mozMeasureText) {

Ctx.measureText = function (text) {

If (ctx.font) ctx.mozTextStyle = ctx.font

Var width = ctx.mozMeasureText (text)

Return {width: width}

}

}

/ / * Setup html5MeasureText

If (ctx.measureText & &! ctx.html5MeasureText) {

Ctx.html5MeasureText = ctx.measureText

Ctx.measureText = function (text) {

Var textMetrics = ctx.html5MeasureText (text)

/ / fake it 'til you make it

TextMetrics.ascent = ctx.html5MeasureText ("m") .width

Return textMetrics

}

}

/ / * for other browsers, no-op away

If (! ctx.fillText) {

Ctx.fillText = function () {}

}

If (! ctx.measureText) {

Ctx.measureText = function () {return 10;}

}

Return ctx

}

Note: to Opera?9.5? So far, Opera? Still don't support HTML5? Canvas in the specification? FillText of the object? And its related methods and properties.

Hello,?Canvas!

Right? Canvas? After some preliminary understanding, let's start to write our first? Canvas? Program, famous? HelloWorld? Another branch of "Hello,?Canvas":

(function () {

Var canvas = document.getElementById ("screen")

Var ctx = fixContext (canvas.getContext ("2d"))

Ctx.font = "20pt Arial"

Ctx.fillText ("Hello, Canvas!", 20,20)

Ctx.fillText (", 20,50)

Function fixContext (ctx) {

/ / * upgrade Firefox 3.0.x text rendering to HTML 5 standard

If (! ctx.fillText & & ctx.mozDrawText) {

Ctx.fillText = function (textToDraw, x, y, maxWidth) {

Ctx.translate (x, y)

Ctx.mozTextStyle = ctx.font

Ctx.mozDrawText (textToDraw)

Ctx.translate (- x,-y)

}

}

/ / * Setup measureText

If (! ctx.measureText & & ctx.mozMeasureText) {

Ctx.measureText = function (text) {

If (ctx.font) ctx.mozTextStyle = ctx.font

Var width = ctx.mozMeasureText (text)

Return {width: width}

}

}

/ / * Setup html5MeasureText

If (ctx.measureText & &! ctx.html5MeasureText) {

Ctx.html5MeasureText = ctx.measureText

Ctx.measureText = function (text) {

Var textMetrics = ctx.html5MeasureText (text)

/ / fake it 'til you make it

TextMetrics.ascent = ctx.html5MeasureText ("m") .width

Return textMetrics

}

}

/ / * for other browsers, no-op away

If (! ctx.fillText) {

Ctx.fillText = function () {}

}

If (! ctx.measureText) {

Ctx.measureText = function () {return 10;}

}

Return ctx

}

) ()

Run the example, Canvas? The area where the object is located displays "Hello,?World!", which is exactly the ctx.fillText in the code ("Hello,?World!",? 20);? The role of.

FillText? And related attributes

FillText? The method is used in Canvas? Displays text in, which accepts four parameters, the last of which is optional

Void?fillText (in?DOMString?text,?in?float?x,?in?float?y,? [Optional]? in?float?maxWidth)

Among them? maxWidth? Represents the maximum width when displaying text, which prevents text overflow, but I found in the test that? Firefox? With Chomre? MaxWidth is specified in. It doesn't have any effect.

Are you using fillText? Method can be set by setting the? Context? Font? Property to adjust the font of the displayed text. In the above example, I used "20pt?Arial" as the font of the displayed text. You can set different values to see the specific effect.

Thank you for reading! On "how to use the HTML5 Canvas tag included" this article is shared here, 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 out for more people to see it!

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.