Canvas 绘制文本 fillText

前面几章节中我们学习了如何绘制图形,如果要在 Canvas 中绘制文本,可以使用 fillText() 方法

我们先来看看 fillText() 绘制出来的文本是什么样的?

Canvas fillText()

fillText() 在 (x, y) 位置填充文本 text。如果选项的第四个参数提供了最大宽度,文本会进行缩放以适应最大宽度

语法

void ctx.fillText(text, x, y [, maxWidth]);
参数 说明
text 要绘制的文本
x 文本起始点的 x 轴坐标
y 文本起始点的 y 轴坐标
maxWidth 可选,需要绘制的最大宽度。如果指定了值,并且经过计算字符串的宽度比最大宽度还要宽,字体为了适应会使用一个水平缩小的字体或者小号的字体

例如要在 (10,10) 位置绘制文本 简单教程,简单编程,可以如下使用

ctx.fillText('简单教程,简单编程',10,10,);

范例

我们先来看看一般的使用方法,在 (10,10) 位置绘制文本 简单教程,简单编程

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="300" height="100">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.fillText("简单教程,简单编程",10,10);
</script>

运行结果如下

改变字体颜色

我们可以使用 fillStyle 设置全局填充颜色,当然了,这个肯定也会影响到文本的颜色

下面的代码绘制了一个绿色的文本

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-2" width="300" height="100">
</canvas>

<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");
ctx.fillStyle = "green";
ctx.fillText("简单教程,简单编程",20,20);
ctx.fillText("https://www.twle.cn",50,50);
</script>

运行结果如下

大家有没有看到字有点糊了,看不太清楚,没关系,下一张章节我们会将如何修复

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.