安徽 电子政务网站定制,佛山高明网站建设设计,六安新闻,泰兴网页定制简言
canvas除了能够绘制图形外#xff0c;也可以绘制文本。
绘制文本
fillText() 填充文本
CanvasRenderingContext2D 对象的方法 fillText() 是 Canvas 2D API 的一部分#xff0c;它在指定的坐标上绘制文本字符串#xff0c;并使用当前的 fillStyle 对其进行填充。存…简言
canvas除了能够绘制图形外也可以绘制文本。
绘制文本
fillText() 填充文本
CanvasRenderingContext2D 对象的方法 fillText() 是 Canvas 2D API 的一部分它在指定的坐标上绘制文本字符串并使用当前的 fillStyle 对其进行填充。存在一个可选参数其指定了渲染文本的最大宽度用户代理将通过压缩文本或使用较小的字体大小来实现。 此方法会直接绘制到画布上而不会修改当前路径因此任何后续的 fill() 或 stroke() 调用都不会对其产生影响。 文本根据 font、textAlign、textBaseline 和 direction 属性所定义的字体和文本布局来渲染。 语法: fillText(text, x, y) fillText(text, x, y, maxWidth) 参数 text 要作为渲染上下文的文本字符串。使用当前的 font、textAlign、textBaseline 和 direction 设置值对文本进行渲染。 x 开始绘制文本的点的 X 轴坐标单位为像素。 y 开始绘制文本的基线的 Y 轴坐标单位为像素。 maxWidth 可选 文本渲染后的最大像素宽度。如果未指定则文本宽度没有限制。但是如果提供了该值用户代理将调整字距选择水平方向更紧凑的字体如果有这种字体或可以在不降低质量的情况下生成这种字体或缩小字体大小以便在指定宽度内容纳文本。
示例
const canvas document.getElementById(canvas);
const ctx canvas.getContext(2d);ctx.font 50px serif;
ctx.fillText(Hello world, 50, 90, 140); strokeText() 描边文本
CanvasRenderingContext2D.strokeText() 是 Canvas 2D API 在给定的 (x, y) 位置绘制文本的方法。如果提供了表示最大值的第四个参数文本将会缩放适应宽度。 语法 void ctx.strokeText(text, x, y [, maxWidth]); 参数 text 使用当前 fonttextAligntextBaseline和direction 的值对文本进行渲染。 x 文本起始点的 x 轴坐标。 y 文本起始点的 y 轴坐标。 maxWidth 可选 需要绘制的最大宽度。如果指定了值并且经过计算字符串的宽度比最大宽度还要宽字体为了适应会使用一个水平缩小的字体如果通过水平缩放当前的字体可以进行有效的或者合理可读的处理或者小号的字体。
示例
const canvas document.getElementById(canvas);
const ctx canvas.getContext(2d);ctx.font 50px serif;
ctx.strokeText(Hello world, 50, 90); measureText() 获取TextMetrics 对象
CanvasRenderingContext2D.measureText() 方法返回一个关于被测量文本TextMetrics 对象包含的信息例如它的宽度。 语法 ctx.measureText(text); 参数
text 需要测量的String 。 文本TextMetrics 对象包含了文本信息的属性例如宽度、对齐信息等。 示例
当测量一段文本的水平宽度时由于字母倾斜/斜体导致字符的宽度可能超出其预定的宽度因此 actualBoundingBoxLeft 和 actualBoundingBoxRight 的总和可能会比内联盒子的宽度width更大。
因此计算 actualBoundingBoxLeft 和 actualBoundingBoxRight 的总和是一种更准确地获取文本绝对宽度的方法
const canvas document.getElementById(canvas);
const ctx canvas.getContext(2d);
const text Abcdefghijklmnop;
ctx.font italic 50px serif;
const textMetrics ctx.measureText(text);
console.log(textMetrics.width);
// 459.8833312988281
console.log(textMetrics.actualBoundingBoxRight textMetrics.actualBoundingBoxLeft,
);
// 462.8833333333333
结语
结束了。
