How to draw text graphics in HTML5 canvas

In HTML5, you first need to use the tag to create a canvas, and then use the javascript font attribute, fillText() or strokeText() method to draw text graphics in the canvas.

HTML5's tag can be used to draw various graphics on web pages, so how to draw text graphics? This article will introduce you to the method of drawing text graphics in HTML5 canvas. I hope it will be helpful to you. [Video tutorial recommendation: HTML5 tutorial]

#Use the tag to create a canvas

On an HTML page, the canvas is a rectangular area. It is specified using the canvas tag element; by default, the canvas has no borders and no content, it is like a container. But we can use its built-in properties or css to add some styles.

Example: Use the width attribute and height attribute to set the width and height.

<canvas id = "mycanvas" width ="400" height ="250"> </canvas>

We can also use css to add borders and background colors to the canvas, for example:

<canvas id="myCanvas" width="300"    style="max-width:90%" style="border:2px solid red;background-color:pink">当前的浏览器不支持HTML5 canvas标签。</canvas>

If the canvas cannot be created, < The content within the canvas> tag indicates that the current browser does not support the HTML5 canvas tag.

Rendering:

Use JavaScript to draw text graphics in the canvas

First, let’s take a look at the

most important attributes and methods that need to be used to draw text graphics on the canvas:

1,

font attribute: Define the text Font attribute, through which you can set or return the current font attribute of the text content on the canvas. Its use is similar to the CSS font property.

2.

fillText() method: Draw "fill" text on the canvas. The default color of the text is: black. The basic syntax is:

fillText(text, x, y, [maxWidth])

3,

strokeText() method: Draw text on the canvas (without filling), that is to say, draw the text outline graphic; similarly, the text color defaults to: black . The basic syntax is:

strokeText(text, x, y, [maxWidth])

Parameter description:

text: Indicates the text graphics that need to be output on the canvas.

x, y: Relative to the canvas, the x coordinate and y coordinate position where the text starts to be drawn

maxWidth: Optional parameter, indicating the maximum text width allowed, in pixels.

Let’s take a look at other style attributes of text that may be used:

1. textAlign style attribute: Set or return the current alignment of text content based on the X-axis coordinate.

The values ​​are: start (default value, specify the starting position of the text), end (specify the end position of the text), center (specify the placement position of the text center), left (left alignment), right (right alignment).

2. fillStyle attribute: Set or return the color, gradient or mode used to fill the painting.

Let’s draw text graphics and see how to draw them through examples:

Example 1: Use fillText()

<canvas id ="myCanvas" width ="400" height ="250" style="border:2px solid red;">当前浏览器不支持HTML5 canvas标记。</canvas>

<script>
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.font = "40px Arial";
ctx.fillText("PHP中文网！",10,50);
</script>

Rendering:

Example 2: Using strokeText()

<script>
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.font = "40px Arial";
ctx.strokeText("PHP中文网！",10,50);
</script>

Rendering:

Example 3: Add color and center text

<script>
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d");  
ctx.font="30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("PHP中文网！",canvas.width/2, canvas.height/2);
</script>

Rendering:

# #Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

The above is the detailed content of How to draw text graphics in HTML5 canvas. For more information, please follow other related articles on the PHP Chinese website!