Canvas 绘制文本骨架 strokeText()

什么叫做绘制文本骨架呢?看下面这张图

只是把文本的边框描了出来,并没有填充文本的内部

Canvas 提供了 strokeText() 用于绘制文本的骨架

Canvas strokeText()

strokeText() 用于在给定的 (x, y) 位置绘制文本的方法

如果传递了表示最大值的第四个参数,文本将会缩放适应宽度

语法

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

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

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

范例

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

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

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

运行结果如下


哎呀,看起来有点糊了,为什么呢?

大家应该都知道,strokeXXX() 方法用来绘制边框的,如果字体比较小,那么边框就会粘在一起,所以就这样了

我们把字体调大一点,比如设置为 44px Microsoft YaHei ,看看效果

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

<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");
ctx.font = "44px Microsoft YaHei";
ctx.strokeText("简单教程,简单编程",50,50);
</script>

运行结果如下

Canvas 基础教程

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

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

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