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

This article mainly introduces HTML5 Canvas how to draw the text, the article is very detailed, has a certain reference value, interested friends must read it!

Draw text with HTML5 Canvas

HTML5 Canvas can use a variety of fonts, sizes, and colors to draw text on the HTML5 canvas. The appearance of the text is controlled by these 2D Context font properties. To draw the text, use the fillText () or strokeText () function.

Online exampl

You can use a variety of fonts, sizes and colors to draw text on the HTML5 canvas.

The appearance of the text is controlled by these 2D Context font properties. In addition, you need to set the fillStyle or strokeStyle2D Context property depending on whether you want to draw fill text or stroke text.

To draw text, use the fillText () or strokeText () function

This is a simple code example:

Exampl

HTML5?Canvas?not?supported

Var?canvas=?document.getElementById ("ex1")

Var?context?=?canvas.getContext ("2d")

Context.font?=? "36px?Verdana"

Context.fillStyle?=? "# 000000"

Context.fillText ("HTML5?Canvas?Text",? 50)

Context.font=? "normal?36px?Arial"

Context.strokeStyle?=? "# 000000"

Context.strokeText ("HTML5?Canvas?Text",? 50)

Have a test? /?

This is the result of painting on the canvas: HTML5 Canvas not supported

Fonts and styles

When you draw text on a HTML5 canvas, you must set the font to use. This is done by setting the value of the 2D context font property. This property is a string with a CSS compatible value in the format [font?style] [font?weight] [font?size] [font?face]

For example, context.font?=? "normal?normal?20px?Verdana"

You can set the following values for each part of the font string: font stylenormal

Italic

Oblique

Inherit

Font weightnormal

Bold

Bolder

Lighter

Auto

Inherit

one hundred

two hundred

three hundred

four hundred

five hundred

six hundred

seven hundred

eight hundred

nine hundred

The size of the font size in pixels, such as 12px, 20px, etc.

Font face font, e.g. Verdana, arial, serif, sans-serif, cursive, fantasy, monospace etc.

Note that not every browser supports all values. Before relying on them, you will have to test the values that the plan uses.

This is another example: "italic?bold?36px?Arial"

Drawing text

As mentioned earlier, when you draw text on a HTML5 canvas, you can draw filled text or outline text. You can use the 2D context function fillText () and manipulate strokeText (). These functions are defined as follows: fillText? (textString,?x,?y? [, maxWidth])

StrokeText? (textString,?x,?y? [, maxWidth])

The textString parameter is the drawing text.

Where x and y represent the position in the text. The x parameter is where the text begins. The y parameter is where the text is placed vertically, but the exact representation depends on the text baseline. The text baseline is described in a later section.

The maxWidth text is overwritten in the following section.

This is a code example: context.font=? "36px?Verdana"

Context.fillStyle?=? "# 000000"

Context.fillText ("HTML5?Canvas?Text",? 50)

Maximum width of text

The optional maxWidth parameter tells the canvas that text cannot take up more space horizontally than a given parameter value. If the text is too wide to accommodate the maxWidth, the width of the text is compressed. It wasn't cut off. This is a code example maxWidth:context.font=? "36px?Verdana" with and without drawing the same text.

Context.fillStyle?=? "# 000000"

Context.fillText ("HTML5?Canvas?Text",? 50)

Context.fillText ("HTML5?Canvas?Text",? 50, 100 and 200)

This is what the two texts look like when painted on the HTML5 canvas: HTML5 Canvas not supported

As you can see, the width of the second text is compressed to fit the maxWidth 200pixel.

Text color

Like any other shape, use the fillStyle and strokeStyle properties of the 2D context to set the color of the fill or stroke text. I won't cover these attributes in more detail here. For more details, see Stroke and fill.

Measure text width

The 2D context object has the ability to measure the pixel width of text. It cannot measure height. This function is called measureText (). This is a code example: var?textMetrics?=?context.measureText ("measure?this")

Var?width?=?textMetrics.width

Measuring the width of the text can be used to calculate whether the text string is suitable for a particular space, and so on.

Text baseline

The text baseline determines how to interpret the y parameter of and. In other words, where the text is placed vertically and how it is interpreted. Note that browsers may also have slight differences in the way this property is interpreted. FillText () strokeText ()

Use the properties of the textBaseline2D context to set the text baseline. Here are the values it can take and its meaning: top text is aligned according to the top of the highest glyph in the text

The hanging text is aligned according to the lines that seem to hang. This is almost the same as top, and in many cases you don't see the difference.

Middle text is aligned according to the middle of the text.

The bottom of a vertical alphabetic glyph, such as Western letters such as the Latin alphabet.

The bottom of the ideographic horizontal directional glyph.

Bottom text is aligned according to the bottom of the glyph in the text, which extends the lowest in the text.

This is an example where example y draws text with the same value (75) for all text, but uses a different baseline for each text drawn. A line ybaseline 75 will be drawn to show you how to set the text baseline around that y value. HTML5 Canvas not supported

Here is the code to generate the above graph: context.stokeStyle?=? "# 000000"

Context.lineWidth=?1

Context.beginPath ()

Context.moveTo (0Jing Zhi 75)

Context.lineTo (500 quot; 75)

Context.stroke ()

Context.closePath ()

Context.font=? "16px?Verdana"

Context.fillStyle?=? "# 000000"

Context.textBaseline?=? "top"

Context.fillText ("top",? 0J. 75)

Context.textBaseline?=? "hanging"

Context.fillText ("hanging",? 40 ~ 5)

Context.textBaseline?=? "middle"

Context.fillText ("middle",? 120 minutes 75)

Context.textBaseline?=? "alphabetic"

Context.fillText ("alphabetic",? 200J. 75)

Context.textBaseline?=? "ideographic"

Context.fillText ("ideographic",? 300)

Context.textBaseline?=? "bottom"

Context.fillText ("bottom-glyph",? 400)

Text alignment

The 2D context textAlign property defines how the text is aligned horizontally when drawn. In other words, the textAlign attribute defines the coordinates at which x draws the text. Start draws the text immediately after the x position

Left draws text immediately after the x position, such as start.

The center of the center text is in an x position.

The end of end text is in the x position.

The right edge of the right text is in the x position, such as end.

Here are some examples that show how the textAlign property works. The vertical line is drawn at x = 250. All text is also drawn with x = 250, but the value of the textAlign attribute is different.

This is a code example of a graph:

Exampl

HTML5?Canvas?not?supported

Var?canvas=?document.getElementById ("ex4")

Var?context?=?canvas.getContext ("2d")

Context.stokeStyle?=? "# 000000"

Context.lineWidth=?1

Context.beginPath ()

Context.moveTo (? 250 (0)

Context.lineTo (? 250 (250)

Context.stroke ()

Context.closePath ()

Context.font=? "16px?Verdana"

Context.fillStyle?=? "# 000000"

Context.textAlign?=? "center"

Context.fillText ("center",? 250)

Context.textAlign?=? "start"

Context.fillText ("start",? 250)

Context.textAlign?=? "end"

Context.fillText ("end",? 250)

Context.textAlign?=? "left"

Context.fillText ("left",? 250 and 50)

Context.textAlign?=? "right"

Context.fillText ("right",? 250)

The above is all the content of the article "how to draw text in HTML5 Canvas". Thank you for reading! Hope to share the content to help you, more related knowledge, 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.