Canvas学习记录之fillText

最新推荐文章于 2024-08-11 23:28:33 发布
最新推荐文章于 2024-08-11 23:28:33 发布
阅读量5.9k 收藏 18
点赞数 5
分类专栏： web前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanshaobo888/article/details/104860059
版权
最新更新时间：2020年03月14日16:20:22
《猛戳-查看我的博客地图-总有你意想不到的惊喜》
概述

本文内容：本文介绍基于fillText()绘制文本的一些基本用法，基本文本(字号、色值、字体)、填充文本、描边文本、自动换行文本、左对齐、右对齐、水平居中、垂直居中、在水平方向基于x轴某点中心对称、水平垂直居中

fillText(text, x, y [, maxWidth]);
  • 在 (x, y)位置填充文本
  • 四个参数依次为：填充的文本、起点x轴坐标、起点y轴坐标、最大宽度(如果指定了值，并且经过计算字符串的值比最大宽度还要宽，字体为了适应会水平缩放（如果通过水平缩放当前字体，可以进行有效的或者合理可读的处理）或者使用小号的字体。)
  • 在画布原点坐标绘制填充文本
ctx.fillStyle = '#000';
ctx.font = "20px serif";
ctx.textBaseline = "top";
ctx.fillText("wan shao bo", 0, 0);

在这里插入图片描述

  • 在画布原点坐标绘制描边文本
ctx.fillStyle = '#000';
ctx.font = "40px serif";
ctx.textBaseline = "top";
ctx.strokeText("wan shao bo", 0, 0);

在这里插入图片描述

  • 在画布原点坐标绘制渐变描边文本
var gradient = ctx.createLinearGradient(0,0,500,0);
gradient.addColorStop(0,"#000");
gradient.addColorStop(0.1,"#7FFFAA");
gradient.addColorStop(0.2,"#0000FF");
gradient.addColorStop(0.3,"#00FFFF");
gradient.addColorStop(0.4,"#7CFC00");
gradient.addColorStop(0.5,"#FFDEAD");
gradient.addColorStop(0.6,"#FF7F50");
gradient.addColorStop(0.7,"#FFB6C1");
gradient.addColorStop(0.8,"#7FFFAA");
gradient.addColorStop(0.9,"#ff77ff");
gradient.addColorStop(1,"#000");
ctx.strokeStyle = gradient;
ctx.textAlign = "left";
ctx.font = "100px serif";
ctx.textBaseline = "top";
ctx.strokeText("wanshaobo", 0, 0);

在这里插入图片描述

  • fillStyle
  • 设置文字颜色
  • font
  • 设置"font-style font-variant font-weight font-size/line-height font-family"
  • 必需设置的两个属性"font-size 和 font-family"
  • textBaseline

文本基线，决定文字垂直方向的对齐方式

  • top，文本基线在文本块的顶部。
  • hanging，文本基线是悬挂基线
  • middle，文本基线在文本块的中间。
  • alphabetic，文本基线是标准的字母基线。
  • ideographic，文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。
  • bottom，文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。
  • 默认值是 alphabetic
绘制自动换行文本

fillText()，绘制单行文本，并且不会换行
measureText()，返回一个关于被测量文本TextMetrics 对象包含的信息（例如它的宽度）

ctx.fillStyle = '#000';
ctx.font = "14px serif";
ctx.textBaseline = "top";
var text = "ds这段444文本不11自动换111要自动换行34744文本不11自动换aaGGGAAknknj自动换"
var lineW = 120;//单行文字行宽
var lineH = 24;//单行文字行高
var x = 0;
var y = 0;
var splitIndex = 1;
var lineIndex = 0;
while (text != '') {
    while ((splitIndex <= text.length) && (ctx.measureText(text.substr(0, splitIndex)).width < lineW)) {
        splitIndex++;
    }
    //最后一行 不用换行
    if (splitIndex - 1 == text.length) {
        ctx.fillText(text, x, y + lineIndex * lineH);
        text = ''
    } else {
        //非最后一行
        ctx.fillText(text.substr(0, splitIndex - 1), x, y + lineIndex * lineH);
        text = text.slice(splitIndex - 1)
    }
    lineIndex++;
    splitIndex = 1;
}

在这里插入图片描述

在固定宽高容器内绘制文本

textAlign，文本的对齐方式的属性。该对齐是基于fillText方法的x的值。所以如果textAlign=“center”，那么该文本将画在 x-50%*width。

  • 左对齐
//绘制矩形边框
ctx.rect(1,1,200,100);
ctx.lineWidth = 1;
ctx.strokeStyle = '#000';
ctx.stroke();
//绘制文本
ctx.textAlign = "left";
ctx.fillStyle = '#000';
ctx.font = "14px serif";
ctx.textBaseline = "top";
ctx.fillText("wan shao bo", 0, 0);

在这里插入图片描述

  • 右对齐
//绘制矩形边框
ctx.rect(1,1,200,100);
ctx.lineWidth = 1;
ctx.strokeStyle = '#000';
ctx.stroke();
//绘制文本
ctx.textAlign = "right";
ctx.fillStyle = '#000';
ctx.font = "14px serif";
ctx.textBaseline = "top";
ctx.fillText("wan shao bo", 200, 0);

在这里插入图片描述

  • 水平居中
//绘制矩形边框
ctx.rect(1,1,200,100);
ctx.lineWidth = 1;
ctx.strokeStyle = '#000';
ctx.stroke();
//绘制文本
ctx.textAlign = "center";
ctx.fillStyle = '#000';
ctx.font = "14px serif";
ctx.textBaseline = "top";
ctx.fillText("wan shao bo", 100, 0);

在这里插入图片描述

  • 在水平方向基于x轴某点中心对称

基于x轴50px中心对齐

//绘制矩形边框
ctx.rect(1,1,200,100);
ctx.lineWidth = 1;
ctx.strokeStyle = '#000';
ctx.stroke();
//x轴50px水平对齐线
ctx.moveTo(50,0);
ctx.fillStyle = '#000';
ctx.lineTo(50,100);
ctx.stroke();
//绘制文本
ctx.textAlign = "center";
ctx.fillStyle = '#000';
ctx.font = "14px serif";
ctx.textBaseline = "top";
ctx.fillText("wan", 50, 0);
ctx.fillText("wan shao", 50, 20);
ctx.fillText("wan shao bo", 50, 40);

在这里插入图片描述

  • 单行文本垂直居中
//绘制矩形边框
ctx.rect(1,1,200,100);
ctx.lineWidth = 1;
ctx.strokeStyle = '#000';
ctx.stroke();
//绘制文本
ctx.textAlign = "left";
ctx.fillStyle = '#000';
ctx.font = "20px serif";
ctx.textBaseline = "middle";
ctx.fillText("wan shao bo", 0, 50);

在这里插入图片描述

  • 单行文本水平垂直居中
//绘制矩形边框
ctx.rect(1,1,200,100);
ctx.lineWidth = 1;
ctx.strokeStyle = '#000';
ctx.stroke();
//绘制文本
ctx.textAlign = "center";
ctx.fillStyle = '#000';
ctx.font = "20px serif";
ctx.textBaseline = "middle";
ctx.fillText("wan shao bo", 100, 50);

在这里插入图片描述

  • 单行右下角对齐
//绘制矩形边框
ctx.rect(1,1,200,100);
ctx.lineWidth = 1;
ctx.strokeStyle = '#000';
ctx.stroke();
//绘制文本
ctx.textAlign = "right";
ctx.fillStyle = '#000';
ctx.font = "20px serif";
ctx.textBaseline = "bottom";
ctx.fillText("wan shao bo", 200, 100);

在这里插入图片描述

参考资料

感谢阅读，欢迎评论^-^

打赏我吧^-^

第76节 绘制文字（fillText 和 stroke)
m0_60889254的博客
02-27 847
和strokeText 是两个常用的方法，分别用于填充文本和绘制文本边框。参数是可选的，用于限制文本的最大宽度。：文本绘制的起始垂直坐标（相对于画布，注意文本基线会在此位置）。：文本绘制的起始垂直坐标（相对于画布，注意文本基线会在此位置）。（可选）：文本的最大宽度，如果文本宽度超过此值，则会被截断。（可选）：文本的最大宽度，如果文本宽度超过此值，则会被截断。：文本绘制的起始水平坐标（相对于画布）。：文本绘制的起始水平坐标（相对于画布）。语法在画布上绘制填充文本和文本边框。指定的是文本的起始绘制位置，其中。
canvas的fillText参数解释
qq_44312272的博客
12-23 7473
一开始用filleText总是显示不出来文字，很是郁闷，后来琢磨了下，原来fillText常用的三个参数的意思弄错了。 void fillText(DOMString text, double x, double y, optional double maxWidth); 常用的形式是 fillText("要现实的文字",x,y)，注意这里面的x,y代表的是哪个点的坐标。 < !DOCTYPE html > <html> <head> <...
09Canvas——文字绘制
Blog of Lytracy
08-10 1810
文章目录1、fillText() 方法2、strokeText() 方法3、font属性4、textAlign 属性5、textBaseline 属性 1、fillText() 方法 使用 fillText() 方法在在画布上绘制实心文本。语法为： ctx.fillText(text, x, y, maxWidth); 参数说明： text 规定在画布上输出的文本。 x 表示开始绘制文本的 x 坐标位置（相对于画布）。 y 表示开始绘制文本的 y 坐标位置（相对于画布）。 maxWidth 表示允许的最
[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)...
weixin_34345560的博客
09-26 302
接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方式： strokeText：描边文本 fillText：填充文本 fillStyle配合fillText使用，strokeStyle配合strokeText使用 strokeText用法： ...
HTML5 Canvas学习笔记(5)游戏得分动画
08-06
通过学习这篇笔记，我们可以深入了解Canvas的基本用法以及如何将它应用于游戏开发。 首先，Canvas是HTML5的一个核心特性，通过`<canvas>`标签在网页中定义一个画布。在JavaScript中，我们可以通过这个标签获取到一...
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
08-06
在“HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体”这篇博文中，作者深入探讨了如何利用Canvas技术来实现菜单项的高亮显示以及如何处理像素字体，这两点在构建具有视觉吸引力和用户友好性的Web应用时非常重要。...
Canvas 自定义扩展方法：文字自动换行
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-11 2352
基本概念与作用说明示例一：基础使用扩展 Canvas 上下文示例二：扩展 Canvas 上下文不同角度的功能使用思路示例三：居中对齐的换行文本示例四：右对齐的换行文本实际工作中的使用技巧示例五：动态调整字体大小以适应容器实战技巧结束语Canvas API 提供了强大的绘图功能，但默认并不支持自动换行。为了满足现代 Web 应用的需求，特别是在有限的空间内展示多行文本，本文将介绍如何为 Canvas 上下文扩展自定义方法来实现文字自动换行功能。
canvas学习
11-22
在这个“canvas学习”的压缩包中，你将找到关于canvas的基本语法和学习笔记，这对于想要掌握这个技术的前端开发者来说是非常宝贵的资源。 1. **Canvas元素** - `canvas`标签是HTML5中的一个新元素，用于在网页上...
HTML Canvas 学习笔记
KISS
08-03 1052
        Colors, Styles, and Shadows Property   fillStyle strokeStyle shadowColor shadowBlur shadowOffsetX shadowOffsetY   Colors, Styles, and Shadows Method   createLinearGradient() createPattern() createR...
【canvas】canvas基础使用（九）：文本绘制
qq_2511276124的博客
04-16 3508
canvas除了能够绘制图形外，也可以绘制文本。
Canvas画布进阶篇---绘制文本
笺赕
01-25 1422
1、描绘文本概述 文本绘制相关的方法 方法 说明 context.fiilText(text,x,y) 描绘文本 context.fillText(text,x,y,maxWidth) context.strokeText(text,x,y) 描绘文本的轮廓 context.strokeText(text,x,y,maxWidth)        fill...
关于canvas的里fillText文字居中和画布清空重画内容
Red_sevenWord的博客
04-28 6982
先在结构中写一个canvas元素 <canvas id="myCanvas1" width="88" height="88"></canvas> 在函数中对于当前元素进行操作,清空画布的内容可以利用改变画布的宽度达到清空的目的 可以用定时器请求数据，重置我下面函数中的a重新描绘画布，以及画布中的文字num数据 modelvisitNumber1 () { ...
HTML5 canvas fillText() 方法
GoodIdea
03-05 2868
定义和用法 fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。 提示：请使用font属性来定义字体和字号，并使用fillStyle属性以另一种颜色/渐变来渲染文本。 JavaScript 语法： context.fillText(text,x,y,maxWidth); 参数值 参数 描述 text 规定在画布上输出的文本。 x ...
html5使用新字体,html5 – 使用带有canvas fillText的font-face字体
weixin_28717683的博客
06-17 420
编辑：嗯,看起来字体是在DOM上的一个元素使用后加载的,所以我只是使用了一个隐藏的Div和一个使用font-face字体的文本,它现在正在工作…… ????我正在使用此代码通过大量更新来更新favicon,但我想使用自定义像素字体来编写数字.var canvas = document.createElement('canvas'),ctx,img = document.createElement('im...
绘制文字 –Canvas的基本操作
chenzhao635的专栏
02-01 229
绘制文字时可以使用fillText方法或strokeText方法。 fillText方法用填充方式绘制字符串，该方法的定义如下所示：void fillText(text,x,y,[maxWidth]); 该方法接受四个参数，第一个参数text表示要绘制的文字，第二个参数 x表示绘制文字的起点横坐标，第三个参数y表示绘制文字的起点纵坐 标，第四个参数maxWi...
给excanvas添加fillText方法
lovenjoe的专栏
03-09 2729
excanvas使得IE能通过VML支持Canvas标签,但是在一些细节方面还是不尽人意.  比如  1.动态生成的Canvas对象将不支持getContext方法,  2.drawImage方法不能用Canvas对象作为第一个参数,  3.不支持fillText等方法.  本文针对以上三个问题给出改进方案.  1.要使IE中的Canvas对象支持getContext等方法需要调用
JavaScript 之 canvas（四）-- 绘制文字
热门推荐
一只小鹰
10-03 2万+
本文原文地址：https://www.jeremyjone.com/485/， 转载请注明，谢谢。 基本概念 在canvas中，为我们提供了一个非常方便的添加文字的方法，直接上 w3school 的文档说明： context.fillText(text,x,y,maxWidth); // text: 规定在画布上输出的文本。 // x: 开始绘制文本的 x 坐标位置（相对于画布）。 // y:...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值