HTML5的canvas也提供渲染文本的方法.
(1)绘制文本方法：fillText和strokeText
fillText(text,x,y[,maxWidth]) 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.
strokeText(text,x,y,[,maxWidth]) 在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的
fillText样例
function draw() {
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext('2d');
ctx.font="48px serif";
ctx.fillStyle="blue";
ctx.fillText("Hello world!",50,50);
}
strokeText样例
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = "48px serif";
ctx.strokeStyle="green";
ctx.strokeText("Hello world", 10, 50);
}
(2)文本的样式
我们用fillText和strokeText方法绘制文本，那么如何设置绘制好的文本的样式呢？canvas中提供了如下方法：
font = value当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。统一设置样式：ctx.font=“bold 18px 幼圆”
textAlign = value文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。
textBaseline = value 基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
direction = value文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。
function draw() {
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext('2d');
ctx.font="bold 48px 幼圆";
ctx.textAlign="left";
ctx.textBaseline="hanging"
ctx.direction="rtl";
ctx.fillText("Hello world!",50,50,1000);
}
(3)预测量文本宽度
当需要获得更多的文本细节时，measureText方法可以给你测量文本的方法。
measureText()将返回一个 TextMetrics对象的宽度、所在像素，这些体现文本特性的属性。
function draw() {
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext('2d');
var text=ctx.measureText("spider");
alert(text.width);
}
(4)色彩Colors
在用fill()方法和stroke()方法时，我们可以用fillStyle和strokeStyle设置填充和边框的颜色：
fillStyle = “color”设置图形的填充颜色。
strokeStyle=“color”设置图形轮廓的颜色。
(5)阴影 Shadows
文字阴影
文字阴影相比已经不足为奇，在CSS3中的text-shadow属性可以设置2D的阴影，在HTML5中canvas也提供了这样的API
shadowOffsetX = floatshadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
shadowOffsetY = floatshadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
shadowBlur = floatshadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。
shadowColor = colorshadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。
这和CSS3的text-shadow有异曲同工之妙，这里不再赘述
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.font = "20px Times New Roman";
ctx.fillStyle = "Black";
ctx.fillText("Sample String", 5, 30);
}
飞翔的哈士奇
发布了117 篇原创文章 · 获赞 130 · 访问量 2万+
私信
关注
标签：canvas,font,ctx,fillText,HTML5,var,文本
来源： /weixin_44307065/article/details/104095080
