当前位置：网站首页>Chapter 5 text operation of canvas

Chapter 5 text operation of canvas

2022-06-29 14:37:00 【yxqq378287007】

《canvas》 The first 5 Chapter Text operation

The first 5 Chapter Text operation

The first 5 Chapter Text operation

5.1 Introduction to text operation

Method	explain
fillText()	Draw fill text
strokeText()	Draw stroke text
measureText()	Get text length

attribute	explain
font	Define text font styles （ size 、 The thickness etc. ）
textAlign	Defines the horizontal alignment of text
textBaseline	Define the vertical alignment of text
fillStyle	Defines the style of the brush fill path
strokeStyle	Defines the style of the brush stroke path

5.2 Text manipulation method

strokeText()、fillText()、measureText() .

5.2.1 strokeText() Method

Draw stroke text , Hollow text .

strokeText(text, x, y, maxWidth)

x,y Represents the leftmost and lowermost coordinates of the text .
maxWidth, Optional parameters , Maximum text width （px）, When it exceeds , The text will be compressed to maxWidth.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); var text = " Green leaf learning network "; cxt.font = "bold 30px  Microsoft YaHei "; cxt.strokeStyle = "purple"; cxt.strokeText(text, 30, 60); //cxt.strokeText(text, 30, 60, 100); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>

5.3.2 fillText() Method

Draw fill text , Solid text .

fillText(text, x, y, maxWidth)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); var text = " Green leaf learning network "; cxt.font = "bold 30px  Microsoft YaHei "; cxt.fillStyle = "purple"; cxt.fillText(text, 30, 60); //cxt.fillText(text, 30, 60, 100); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>

5.2.3 measureText() Method

Return an object , This object width Property to get the text length .

var length = ctx.measureText(text).width;

Get text height

let metrics = ctx.measureText(text); 

// The height of all words under this font 
let fontHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent; 

//  The actual height of the current text string in this font 
let actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;

Text length

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); var text = " Green leaf learning network "; cxt.font = "bold 30px  Microsoft YaHei "; cxt.strokeStyle = "red"; cxt.strokeText(text, 30, 60); var length = cxt.measureText(text).width; alert(" The length of the text is " + length + "px"); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>

Center text horizontally

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); var text = " Green leaf learning network "; cxt.font = "20px bold"; var textWidth = cxt.measureText(text).width; var canvasWidth = cnv.width; var xPosition = canvasWidth / 2 - textWidth / 2; cxt.fillStyle = "purple"; cxt.fillText(text, xPosition, 50); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

5.3 Text operation properties

font、textAlign、textBaseline.

5.3.1 font attribute

Define the font style of the text .

ctx.font = "font-style font-weight font-size/line-height font-family";

font The default value is 10px sans-serif.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); var text = "helicopter"; cxt.font = "bold 30px  Microsoft YaHei "; cxt.fillStyle = "purple"; cxt.fillText(text, 30, 60); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>

5.3.2 textAlign attribute

Defines the horizontal alignment of text .

ctx.textAlign = " Property value ";

Property value	explain
start	The text starts at the specified abscissa
end	The text ends at the specified abscissa
left	Align text left （ similar start）
rightt	Align text right （ similar end）
center	The text center is at the specified abscissa

start and end It is related to the reading direction of the text , Read from left to right ,start、end Corresponding to the left and right ; Read from right to left ,start、end Corresponding to right and left respectively .

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); // On the abscissa 150 Draw a vertical line at  cxt.moveTo(150, 0); cxt.lineTo(150, 200); cxt.strokeStyle = "purple"; cxt.stroke(); cxt.font = "15px Arial"; cxt.textAlign = "start"; cxt.fillText("textAlign The value is start", 150, 30); cxt.textAlign = "left"; cxt.fillText("textAlign The value is left", 150, 60); cxt.textAlign = "end"; cxt.fillText("textAlign The value is end", 150, 90); cxt.textAlign = "right"; cxt.fillText("textAlign The value is right", 150, 120); cxt.textAlign = "center"; cxt.fillText("textAlign The value is center", 150, 150); } </script>
</head>
<body>
    <canvas id="canvas" width="300" height="200" style="border:1px dashed gray;"></canvas>
</body>
</html>

5.3.3 textBaseline attribute

Defines the vertical alignment of text .

ctx.textBaseline= " Property value ";

Property value	explain
alphabetic	Text baseline is the baseline of ordinary English letters
top	The text baseline is em The top of the box
middle	The text baseline is em The center of the box
bottom	The text baseline is em The bottom of the box

Other attributes hanging、ideographic etc. .

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); // In the ordinate 100 Draw a horizontal line at  cxt.moveTo(0, 100); cxt.lineTo(300, 100); cxt.strokeStyle = "purple"; cxt.stroke(); cxt.font = "20px Arial"; cxt.textBaseline = "alphabetic"; cxt.fillText("alphabetic", 10, 100); cxt.textBaseline = "top"; cxt.fillText("top", 110, 100); cxt.textBaseline = "middle"; cxt.fillText("middle", 160, 100); cxt.textBaseline = "bottom"; cxt.fillText("bottom", 230, 100); } </script>
</head>
<body>
    <canvas id="canvas" width="300" height="200" style="border:1px dashed gray;"></canvas>
</body>
</html>