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

This article mainly introduces html5 how to achieve writing on the picture, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

In fact, writing in canvas is very simple, he has two native methods, namely strokeText (stroke text) and fillText (filled text)-you can see at a glance that they are working with strokeRect and fillRect.

They can't produce a path.

Their usage is very simple, accepting three parameters, followed by the text to be written, x coordinates, y coordinates, such as:

Ctx.fillText ('1223 million 50 50)

Ctx.strokeText ('asdfsadf',150,50)

Of course, this is lame. It is painted in black by default.

How to set up a color font if you want to draw it? In fact, you just need to set fillStyle and strokeStyle like drawing a rectangle:

Ctx.fillStyle= "# f00"

Ctx.strokeStyle= "# 0f0"

After this setting, you can draw color words. You can draw gradual words by adding gradients.

Font Settin

Of course, it's quite possible that I also need to change the font size, which is similar to the method of CSS, that is, the font property of context, such as:

Ctx.font = "30px Arial"

Font has a default value of '10px sans-serif', and the parameter he accepts must also contain at least two values, the font size font name. If there is no one of these two values, then the setting will not take effect. Not even if there are a lot of other settings.

Font has some other settings, English version:

Font-style: font style, that is, normal normal, italic italic, one of the slanted oblique. Many fonts have the same slanting and italic effects. Examples

Font-variant: font variants. The value may be one of the normal,small-caps. Most fonts have been added and have not changed because there are no variations. Examples

Font-weight: font weight. Values can be:

Normal

Bold

Bolder

Lighter

100m / m / m 900

This is the same as setting the font weight by CSS-in fact, many fonts have only bold and normal font states, and there may be more English fonts.

In addition, he has a string of useless values:

Caption,icon,menu,message-box,small-caption,status-bar

Their role is to make fonts appear in a certain format, but almost many fonts do not have these formats. They only need to choose one to join the font, but they can pass in the font alone, such as ctx.font='menu', unlike the previous attribute. Examples

Note: all of these settings are just given a value and are added to the font as a string. There are no separate settings. With such a long font string, the order of the attributes needs to be paid attention to. In fact, their order follows the order in CSS:

[[|]? [/?]?] | caption | icon | menu | message-box | small-caption | status-bar

Note: the font of canvas has no line-height setting, so you can attach a value, but if you set it, it will be invalid.

The attributes in each pair of [] are free to switch the order, but each? The properties before and after cannot be changed. To make it easier to understand, I would like to sum up:

The setting order of font styles, variants, weights, and weights can be interchangeable, but they must be at the front.

The font size must be followed by the font name, and their order must be after the settings in the previous section

If you add the caption string or something, it must be added at the end.

With the exception of the caption string, font size and name must be added to all settings.

Mom is so complicated. It seems that I can be proud of having learned CSS well.

Here is a font setting that works:

Font size and font name are indispensable. The simplest:

Ctx.font?=? "30px Arial"

Ctx.font?=? "small-caps italic 70030px Arial menu"

And the following will not take effect:

Ctx.font?=? "small-caps italic 30px Arial 700menu"

Because the font weight setting is in the wrong place.

Note: only one font setting is wrong (in the wrong order? The wrong word? ), all will not take effect and will not report an error

Text alignment in canvas

Text alignment in canvas sets the context.textAlign property. Its usage is as follows:

Context.textAlign= "center | end | left | right | start"

Thank you for reading this article carefully. I hope the article "how to write on a picture in html5" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.