canvas 文本

最新推荐文章于 2024-08-14 10:18:57 发布

doubleicon

最新推荐文章于 2024-08-14 10:18:57 发布

阅读量1.2k

点赞数

分类专栏： html 文章标签： canvas font canvas textBaseline textAlign

本文链接：https://blog.csdn.net/u011872945/article/details/37818513

版权

html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Canvas文本的书写

canvas font

font 属性设置或返回画布上文本内容的当前字体属性

语法：context.font="italic small-caps bold 12px arial";

属性值如下：

canvas textAlign

textAlign属性根据锚点，设置或返回文本内容的当前对齐方式。

语法：context.textAlign="center|end|left|right|start";

属性值：

canvas textBaseline

textBaseline 属性设置或返回在绘制文本时的当前文本基线。

属性值说明：

canvas fillText

fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。

语法：context.fillText(text,x,y,maxWidth);

参数说明：

text::规定在画布上输出的文本

x:开始绘制文本的 x 坐标位置（相对于画布）。

y:开始绘制文本的 y 坐标位置（相对于画布）。

maxWidth:可选。允许的最大文本宽度，以像素计。

canvas strokeText

strokeText() 方法在画布上绘制文本（没有填色）。文本的默认颜色是黑色。

语法：context.strokeText(text,x,y,maxWidth);

参数说明同上面的fillText

canvas meatureText

measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。

语法：context.measureText(text).width;

示例代码如下：

 var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.font = "20px Arial";
            context.fillText("Hello World", 0, 30);

            context.strokeStyle = "blue";
            context.moveTo(200, 0);
            context.lineTo(200, 150);
            context.stroke();

            context.textAlign = "start";
            context.fillText("textAlign=start", 200, 30);

            context.textAlign = "center";
            context.fillText("textAlign=center", 200, 60);

            context.textAlign = "end";
            context.fillText("textAlign=end", 200, 90);

            context.textAlign = "left";
            context.fillText("textAlign=left", 200, 120);
            var txt = "textAlign=right";
            context.textAlign = "right";
            context.fillText(txt, 200, 150);

            context.fillText("width:" + context.measureText(txt).width, 600, 150);

            context.moveTo(0, 200);
            context.lineTo(700, 200);
            context.stroke();
            context.textAlign = "start";
            context.textBaseline = "top";
            context.fillText("Top", 10, 200);

            context.textBaseline = "bottom";
            context.fillText("bottom", 80, 200);

            context.textBaseline = "middle";
            context.fillText("middle", 160, 200);
           
            context.textBaseline = "hanging";
            context.fillText("hanging", 260, 200);

            context.textBaseline = "ideographic";
            context.fillText("ideographic", 360, 200);

            context.textBaseline = "alphabetic";
            context.fillText("alphabetic", 560, 200);

效果数如下：